Add new component for e-commerce, and add product thumbnail 1 component

madebyais · Jul 25, 2021 · d295030 · d295030
1 parent e708b0c
commit d295030
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 8 deletions.
diff --git a/components/e-commerce/index.ts b/components/e-commerce/index.ts
@@ -0,0 +1 @@
+export {default as ProductThumbnail1} from './product-thumbnail-1'
diff --git a/components/e-commerce/product-thumbnail-1.tsx b/components/e-commerce/product-thumbnail-1.tsx
@@ -0,0 +1,36 @@
+import { Image } from "antd"
+import image from "next/image"
+import Link from "next/link"
+import { FC } from "react"
+
+interface IProductThumbnail1Props {
+  readonly imageUrl?: string
+  readonly title: string
+  readonly category?: string
+  readonly currency?: string
+  readonly price: number
+  readonly discountedPrice?: number
+  readonly href: string
+}
+
+const ProductThumbnail1: FC<IProductThumbnail1Props> = ({ imageUrl = '', title, category = '', currency = 'IDR', price = 0, discountedPrice = 0, href }) => (
+  <Link href={href} passHref>
+    <div className={`cursor-pointer`}>
+      {imageUrl.length > 0 && <Image src={imageUrl} alt={`image`} preview={false} />}
+      <div className={`font-bold`}>{title}</div>
+      {category.length > 0 && <div>{category}</div>}
+      <div className={`flex justify-start items-center`}>
+        {discountedPrice > 0 ? (
+          <>
+            <div className={`font-bold text-red-500 mr-2`}>{currency} {discountedPrice.toLocaleString()}</div>
+            <div className={`text-xs line-through text-gray-500`}>{currency} {price.toLocaleString()}</div>
+          </>
+        ) : (
+          <div className={`font-bold`}>{currency} {price.toLocaleString()}</div>
+        )}
+      </div>
+    </div>
+  </Link>
+)
+
+export default ProductThumbnail1
diff --git a/pages/components/_layout.tsx b/pages/components/_layout.tsx
@@ -9,15 +9,22 @@ const LayoutComponentPreview: FC = ({ children }) => {
         <title>Component Preview</title>
       </Head>
 
-      <main className={`grid grid-cols-8`}>
-        <div className={`bg-white h-screen col-span-1 p-5 border-r`}>
-          <div className={`font-bold uppercase mb-10`}>Component Preview</div>
-          <Menu title={`Top Navigation Bar`} href={`/components/top-navbar`} />
-          <Menu title={`Footer`} href={`/components/footer`} />
-          <br/>
-          <Menu title={`Header`} href={`/components/header`} />
+      <main>
+        <div className={`hidden md:block md:grid md:grid-cols-8`}>
+          <div className={`bg-white h-screen col-span-1 p-5 border-r`}>
+            <div className={`font-bold uppercase mb-10`}>Component Preview</div>
+            <Menu title={`Top Navigation Bar`} href={`/components/top-navbar`} />
+            <Menu title={`Header`} href={`/components/header`} />
+            <Menu title={`Footer`} href={`/components/footer`} />
+            <br/>
+            <Menu title={`E-commerce`} href={`/components/e-commerce`} />
+          </div>
+          <div className={`h-screen col-span-7 p-5 overflow-y-scroll`}>
+            {children}
+          </div>
         </div>
-        <div className={`h-screen col-span-7 p-5 overflow-y-scroll`}>
+
+        <div className={`w-full block p-5 md:hidden`}>
           {children}
         </div>
       </main>

diff --git a/pages/components/e-commerce.tsx b/pages/components/e-commerce.tsx
@@ -0,0 +1,22 @@
+import { ProductThumbnail1 } from "components/e-commerce";
+import LayoutComponentPreview from "./_layout";
+
+export default function EcommercePreviewPage() {
+  return (
+    <LayoutComponentPreview>
+      <div>
+        <div className={`mb-10 text-lg font-bold uppercase`}>Product Thumbnail 1</div>
+        <div className={`flex justify-between items-center mb-3`}>
+          <div className={`font-bold`}>Electronics</div>
+          <div><a href={`#`}>See all</a></div>
+        </div>
+        <div className={`grid grid-cols-2 md:grid-cols-6 gap-5`}>
+          <ProductThumbnail1 imageUrl={`https://placeimg.com/400/600/tech/grayscale`} title={`Laptop X`} category={`Laptop`} price={500000} discountedPrice={200000} href={`/components/e-commerce`} />
+          <ProductThumbnail1 imageUrl={`https://placeimg.com/400/600/tech/grayscale`} title={`Phone XS`} category={`Phone`} price={500000} href={`/components/header`} />
+          <ProductThumbnail1 imageUrl={`https://placeimg.com/400/600/tech/grayscale`} title={`Tablet Y`} category={`Tablet`} price={500000} href={`/components/footer`} />
+          <ProductThumbnail1 imageUrl={`https://placeimg.com/400/600/tech/grayscale`} title={`PC Z`} price={500000} href={`/components`} />
+        </div>
+      </div>
+    </LayoutComponentPreview>
+  )
+}