diff --git a/pages/test.tsx b/pages/test.tsx index f9296f786..29f41437a 100644 --- a/pages/test.tsx +++ b/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 ( <> + + + + ) } diff --git a/src/components/common/EmptyCommon/EmptyCommon.module.scss b/src/components/common/EmptyCommon/EmptyCommon.module.scss new file mode 100644 index 000000000..e866ce699 --- /dev/null +++ b/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; + } +} diff --git a/src/components/common/EmptyCommon/EmptyCommon.tsx b/src/components/common/EmptyCommon/EmptyCommon.tsx new file mode 100644 index 000000000..6e4fc79a8 --- /dev/null +++ b/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 ( +
+
+ +
+ { + description &&
+ {description} +
+ } +
+ ) +} + +export default EmptyCommon \ No newline at end of file diff --git a/src/components/common/EmptyCommon/empty.svg b/src/components/common/EmptyCommon/empty.svg new file mode 100644 index 000000000..c62a71ab3 --- /dev/null +++ b/src/components/common/EmptyCommon/empty.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/StaticImage/StaticImage.module.scss b/src/components/common/StaticImage/StaticImage.module.scss new file mode 100644 index 000000000..4700c71cc --- /dev/null +++ b/src/components/common/StaticImage/StaticImage.module.scss @@ -0,0 +1,5 @@ +.staticImage { + img { + @apply w-full h-full; + } +} diff --git a/src/components/common/StaticImage/StaticImage.tsx b/src/components/common/StaticImage/StaticImage.tsx new file mode 100644 index 000000000..abc27912a --- /dev/null +++ b/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 ( + {alt} + ) +} + +export default StaticImage \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 56896f790..d124b0578 100644 --- a/src/components/common/index.ts +++ b/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'