🎨 styles: tab common

:%s

pages/test.tsx

@@ -1,5 +1,5 @@
 import {
-  CollapseCommon, Layout, RelevantBlogPosts
+  CollapseCommon, EmptyCommon, Layout, RelevantBlogPosts
 } from 'src/components/common'
 
 const COLLAPSE_DATA = [
@@ -39,8 +39,12 @@ const COLLAPSE_DATA = [
 export default function Test() {
   return (
     <>
+      <EmptyCommon />
       <CollapseCommon data={COLLAPSE_DATA} />
       <RelevantBlogPosts />
+      <EmptyCommon description="" />
+      <EmptyCommon description="No product" />
+
     </>
   )
 }

src/components/common/EmptyCommon/EmptyCommon.module.scss

@@ -0,0 +1,15 @@
+@import "../../../styles/utilities";
+
+.empty {
+    padding: 4rem 1.6rem;
+    margin: auto;
+    .imgWrap {
+        min-width: 10rem;
+    }
+
+    .description {
+        color: var(--disabled);
+        text-align: center;
+        margin-top: 2.4rem;
+    }
+}

src/components/common/EmptyCommon/EmptyCommon.tsx

@@ -0,0 +1,25 @@
+import { StaticImage } from '..';
+import EmptyImg from './empty.svg';
+import s from './EmptyCommon.module.scss';
+
+
+interface Props {
+    description?: string
+}
+
+const EmptyCommon = ({ description = "No data to display" }: Props) => {
+    return (
+        <div className={s.empty}>
+            <div className="imgWrap">
+                <StaticImage src={EmptyImg} alt="empty" />
+            </div>
+            {
+                description && <div className={s.description}>
+                    {description}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default EmptyCommon

src/components/common/StaticImage/StaticImage.module.scss

@@ -0,0 +1,5 @@
+.staticImage {
+    img {
+        @apply w-full h-full;
+    }
+}

src/components/common/StaticImage/StaticImage.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import s from './ImgWithLink.module.scss'
+import Image from 'next/image'
+
+export interface Props {
+    src: StaticImageData,
+    alt?: string,
+}
+
+const StaticImage = ({ src, alt }: Props) => {
+    return (
+        <Image src={src} alt={alt} placeholder='blur' className={s.staticImage}/>
+    )
+}
+
+export default StaticImage

src/components/common/index.ts

@@ -39,3 +39,5 @@ export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
+export { default as StaticImage} from './StaticImage/StaticImage'
+export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'