3 files changed, 132 insertions, 0 deletions
diff --git a/docs/components/image/ImageFigure.tsx b/docs/components/image/ImageFigure.tsx
new file mode 100644
index 0000000..b90237e
--- /dev/null
+++ b/docs/components/image/ImageFigure.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import Image from "next/image";
+
+type ImageProps = Parameters<typeof Image>[0];
+
+export type ImageFigureProps = ImageProps & {
+  caption?: string;
+  margin?: number;
+  captionSpacing?: number;
+  shadow?: boolean;
+  borderRadius?: boolean;
+};
+
+export function ImageFigure(props: ImageFigureProps): React.ReactNode {
+  const {
+    caption,
+    margin = 40,
+    captionSpacing = null,
+    shadow = false,
+    borderRadius = false,
+    ...rest
+  } = props;
+
+  return (
+    <figure className="block text-center" style={{ margin: `${margin}px 0` }}>
+      <div className="relative inline-block w-full max-w-full overflow-hidden border-box text-[0px]">
+        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+        <Image {...rest} />
+      </div>
+      {caption && (
+        <figcaption
+          className="m-0 text-xs text-center text-gray-500"
+          style={captionSpacing ? { marginTop: captionSpacing } : {}}
+        >
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}
diff --git a/docs/components/image/ThemedImage.tsx b/docs/components/image/ThemedImage.tsx
new file mode 100644
index 0000000..0416bd9
--- /dev/null
+++ b/docs/components/image/ThemedImage.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import Image from "next/image";
+
+export interface Image {
+  height: number;
+  width: number;
+  source: string;
+}
+
+export interface ThemedImageProps {
+  title?: string;
+  dark?: Image;
+  light?: Image;
+  priority?: boolean;
+}
+
+export function ThemedImage({
+  title,
+  light,
+  dark,
+  priority = false,
+}: ThemedImageProps) {
+  return (
+    <>
+      <div className="block w-full dark:hidden">
+        <Image
+          alt={title}
+          src={light.source}
+          width={light.width}
+          height={light.height}
+          priority={priority}
+        />
+      </div>
+      <div className="hidden w-full dark:block">
+        <Image
+          alt={title}
+          src={dark.source}
+          width={dark.width}
+          height={dark.height}
+          priority={priority}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/docs/components/image/ThemedImageFigure.tsx b/docs/components/image/ThemedImageFigure.tsx
new file mode 100644
index 0000000..9c50dc7
--- /dev/null
+++ b/docs/components/image/ThemedImageFigure.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { ImageFigureProps } from "./ImageFigure";
+import { ThemedImage, ThemedImageProps } from "./ThemedImage";
+import cn from "classnames";
+export type ThemedImageFigureProps = Omit<ImageFigureProps, "src"> &
+  ThemedImageProps;
+
+export function ThemedImageFigure(
+  props: ThemedImageFigureProps
+): React.ReactNode {
+  const {
+    caption,
+    margin = 40,
+    captionSpacing = null,
+    shadow = false,
+    borderRadius = false,
+    ...rest
+  } = props;
+
+  return (
+    <figure
+      className="block -mx-4 text-center sm:-mx-4 md:-mx-7 lg:-mx-12"
+      style={{ marginTop: `${margin}px`, marginBottom: `${margin}px` }}
+    >
+      <div
+        className={cn(
+          "relative inline-block max-w-full overflow-hidden border-box text-[0px]",
+          {
+            "rounded-md": borderRadius,
+            "shadow-lg": shadow,
+          }
+        )}
+      >
+        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+        <ThemedImage {...rest} />
+      </div>
+      {caption && (
+        <figcaption
+          className="m-0 text-xs text-center text-gray-500"
+          style={captionSpacing ? { marginTop: captionSpacing } : {}}
+        >
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  );
+}