feat(ProfileSkeleton.component.tsx): complete skeleton

JasonCrk · Nov 19, 2023 · 72cd3d4 · 72cd3d4
1 parent c0f1269
commit 72cd3d4
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/src/components/skeleton/ProfileSkeleton.component.tsx b/src/components/skeleton/ProfileSkeleton.component.tsx
@@ -1,7 +1,47 @@
 import { FC } from 'react'
 
 const ProfileSkeleton: FC = () => {
-  return <div>ProfileSkeleton</div>
+  return (
+    <section>
+      <div
+        className='position-relative bg-dark-subtle w-100'
+        style={{ height: '200px' }}
+      >
+        <div
+          className='position-absolute'
+          style={{
+            bottom: -90,
+            left: 40,
+          }}
+        >
+          <div
+            className='position-relative rounded-circle bg-secondary'
+            style={{ width: '180px', height: '180px' }}
+          ></div>
+        </div>
+      </div>
+
+      <div
+        className='container-lg px-5 position-relative'
+        style={{ paddingTop: '100px' }}
+      >
+        <p className='placeholder-glow mb-3'>
+          <span
+            className='placeholder placeholder-lg w-100'
+            style={{ height: '40px' }}
+          ></span>
+        </p>
+
+        <p className='placeholder-glow d-flex flex-wrap gap-1'>
+          <span className='placeholder col-4'></span>
+          <span className='placeholder col-7'></span>
+          <span className='placeholder col-7'></span>
+          <span className='placeholder col-4'></span>
+          <span className='placeholder col-5'></span>
+        </p>
+      </div>
+    </section>
+  )
 }
 
 export default ProfileSkeleton