From 4838df315931bb883f704ec3e1abe2685f296cdf Mon Sep 17 00:00:00 2001
From: HsiangNianian <admin@jyunko.cn>
Date: Sat, 22 Apr 2023 19:52:26 +0800
Subject: 😀
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/image/ImageFigure.tsx | 40 +++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 docs/components/image/ImageFigure.tsx

(limited to 'docs/components/image/ImageFigure.tsx')

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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2