From 6c5c4dd4c2c5714c35882d6b25744c71cd6a6330 Mon Sep 17 00:00:00 2001
From: Quangnhankie <nhantran@kie.io>
Date: Thu, 21 Oct 2021 16:33:24 +0700
Subject: [PATCH] :sparkles: feat: add blog card

:%s
---
 .../ListBlogCardSkeleton.module.scss          | 18 +++++++++++++++++
 .../ListBlogCardSkeleton.tsx                  | 20 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss
 create mode 100644 src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx

diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss
new file mode 100644
index 000000000..2f6541e7e
--- /dev/null
+++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss
@@ -0,0 +1,18 @@
+.listBlogCardSkeleton {
+    display: flex;
+    overflow: hidden;
+    width: 90%;
+    justify-content: space-between;
+    div{
+        min-width: 32rem;
+    }
+
+    &.wrap {
+        flex-wrap: wrap;
+        overflow: unset;
+        > div {
+            margin-bottom: 1.6rem;
+        }
+    }
+    
+}
diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx
new file mode 100644
index 000000000..015a97374
--- /dev/null
+++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { ProductCardSkeleton } from '..'
+import s from './ListBlogCardSkeleton.module.scss'
+
+type Props = {
+  count?: number
+  isWrap?: boolean,
+}
+const ListBlogCardSkeleton = ({ count = 3, isWrap }: Props) => {
+
+  return (
+    <div className={classNames(s.listBlogCardSkeleton, { [s.wrap]: isWrap })}>
+      {
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item}  />)
+      }
+    </div>
+  )
+}
+
+export default ListBlogCardSkeleton