refactor: Content Skeleton Component

YAPP-Github · Jun 14, 2024 · ce9716e · ce9716e
1 parent 2b08363
commit ce9716e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/src/common/components/ContentSkeleton/index.tsx b/src/common/components/ContentSkeleton/index.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from "@shared/components/ui/skeleton";
+
+export default function ContentSkeleton ({
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <Skeleton className={className} {...props} />
+    )
+}
diff --git a/src/workbook/components/WorkbookSkeleton/index.tsx b/src/workbook/components/WorkbookSkeleton/index.tsx
@@ -1,19 +1,28 @@
 import { Skeleton } from "@shared/components/ui/skeleton";
 
+import ContentSkeleton from "@common/components/ContentSkeleton";
+
 export default function WorkbookSkeleton() {
+  const skeletonItems = new Array(6).fill(null);
+
   return (
     <div className="flex h-[100vh] w-full flex-col items-center overflow-x-hidden">
       <Skeleton className="h-[338px] w-full" />
 
       {/* Content Skeleton */}
-      <div className="w-full mt-[70px]">
-        <Skeleton className="h-[30px]" style={{ width: "60%" }}/>
-        <Skeleton className="h-[30px]" style={{ width: "80%", marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
-        <Skeleton className="h-[30px] w-full" style={{ marginTop: "9px" }} />
+      <div className="mt-[70px] w-full">
+        <ContentSkeleton className="h-[30px]" style={{ width: "60%" }} />
+        <ContentSkeleton
+          className="h-[30px]"
+          style={{ width: "80%", marginTop: "9px" }}
+        />
+        {skeletonItems.map((_, index) => (
+          <ContentSkeleton
+            key={index}
+            className="h-[30px] w-full"
+            style={{ marginTop: "9px" }}
+          />
+        ))}
       </div>
     </div>
   );