fix(skeleton): added blog skeleton

HoseaCodes · Dec 17, 2021 · 48ff28f · 48ff28f
1 parent a876101
commit 48ff28f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/src/Components/Skeleton/skeleton.css b/src/Components/Skeleton/skeleton.css
@@ -58,6 +58,12 @@
   /* overflow: hidden; */
 }
 
+.skeleton-blog {
+  background: #23292f;
+  border-radius: 5%;
+  height: 100%;
+}
+
 .shimmer {
   width: 50%;
   height: 100%;

diff --git a/src/Components/Skeleton/skeletonBlog.jsx b/src/Components/Skeleton/skeletonBlog.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import SkeletonElement from './skeletonElement';
+import Shimmer from './shimmer';
+
+const SkeletonBlog = () => {
+    return (
+        <div className="skeleton-wrapper skeleton-blog col-lg-11 ">
+          <div style={{display: 'flex'}}>
+            <div className="article-card">
+                <SkeletonElement type="avatar"/>
+            </div>
+
+            <div className='article-content'>
+                <SkeletonElement type="title" />
+                <SkeletonElement type="text" />
+                <SkeletonElement type="text" />
+                <SkeletonElement type="text" />
+                <SkeletonElement type="text" />
+                <SkeletonElement type="text" />
+            </div>
+          </div>
+            <Shimmer/>
+        </div>
+    )
+}
+
+export default SkeletonBlog;