From 5e2cb0e3a854a17f93ae419632f4cf2232b737f9 Mon Sep 17 00:00:00 2001
From: AkaraChen <85140972+AkaraChen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 17:34:55 +0800
Subject: [PATCH] feat: add base skeleton component (#11339)

---
 web/app/components/base/skeleton/index.tsx | 47 ++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 web/app/components/base/skeleton/index.tsx

diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx
new file mode 100644
index 0000000000..5f29c22f7c
--- /dev/null
+++ b/web/app/components/base/skeleton/index.tsx
@@ -0,0 +1,47 @@
+import type { ComponentProps, FC } from 'react'
+import classNames from '@/utils/classnames'
+
+type SkeletonProps = ComponentProps<'div'>
+
+export const SkeletonContanier: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex flex-col gap-1', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonRow: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('flex items-center gap-2', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
+  const { className, children, ...rest } = props
+  return (
+    <div className={classNames('h-2 rounded-sm opacity-20 bg-text-tertiary my-1', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export const SkeletonPoint: FC = () =>
+  <div className='text-text-quaternary text-xs font-medium'>·</div>
+
+/** Usage
+ * <SkeletonContanier>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *    <SkeletonPoint />
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ * <SkeletonRow>
+ */