Add new product thumbnail 2 for e-commerce component

madebyais · Jul 25, 2021 · ac4730a · ac4730a
1 parent 6e136e2
commit ac4730a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/components/e-commerce/index.ts b/components/e-commerce/index.ts
@@ -1 +1,2 @@
-export {default as ProductThumbnail1} from './product-thumbnail-1'
+export {default as ProductThumbnail1} from './product-thumbnail-1'
+export {default as ProductThumbnail2} from './product-thumbnail-2'
diff --git a/components/e-commerce/product-thumbnail-2.tsx b/components/e-commerce/product-thumbnail-2.tsx
@@ -0,0 +1,41 @@
+import Image from "next/image"
+import Link from "next/link"
+import { FC } from "react"
+
+interface IProductThumbnail2Props {
+  readonly imageUrl?: string
+  readonly title: string
+  readonly category?: string
+  readonly currency?: string
+  readonly price: number
+  readonly discountedPrice?: number
+  readonly href: string
+}
+
+const ProductThumbnail2: FC<IProductThumbnail2Props> = ({ imageUrl = '', title, category = '', currency = 'IDR', price = 0, discountedPrice = 0, href }) => (
+  <Link href={href} passHref>
+    <div className={`bg-white border cursor-pointer flex items-center`}>
+      {imageUrl.length > 0 && 
+        <Image src={imageUrl.toString()} alt={`image`} width={120} height={120} />
+      }
+      <div className={`h-full flex flex-col justify-between p-5`}>
+        <div>
+          <div className={`font-bold`}>{title}</div>
+          {category.length > 0 && <div>{category}</div>}
+        </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>
+    </div>
+  </Link>
+)
+
+export default ProductThumbnail2
diff --git a/pages/components/e-commerce.tsx b/pages/components/e-commerce.tsx
@@ -1,10 +1,10 @@
-import { ProductThumbnail1 } from "components/e-commerce";
+import { ProductThumbnail1, ProductThumbnail2 } from "components/e-commerce";
 import LayoutComponentPreview from "./_layout";
 
 export default function EcommercePreviewPage() {
   return (
     <LayoutComponentPreview>
-      <div>
+      <div className={`mb-20`}>
         <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>
@@ -14,7 +14,21 @@ export default function EcommercePreviewPage() {
           <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`} />
+          <ProductThumbnail1 imageUrl={`https://placeimg.com/400/600/tech/grayscale`} title={`PC Z`} price={500000} href={`/components`} textAlign={`center`} />
+        </div>
+      </div>
+
+      <div className={`mb-20`}>
+        <div className={`mb-10 text-lg font-bold uppercase`}>Product Thumbnail 2</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-1 md:grid-cols-3 gap-5`}>
+          <ProductThumbnail2 imageUrl={`https://placeimg.com/150/150/tech/grayscale`} title={`Laptop X`} category={`Laptop`} price={500000} discountedPrice={200000} href={`/components/e-commerce`} />
+          <ProductThumbnail2 imageUrl={`https://placeimg.com/150/150/tech/grayscale`} title={`Phone XS`} category={`Phone`} price={500000} href={`/components/header`} />
+          <ProductThumbnail2 imageUrl={`https://placeimg.com/150/150/tech/grayscale`} title={`Tablet Y`} category={`Tablet`} price={500000} href={`/components/footer`} />
+          <ProductThumbnail2 imageUrl={`https://placeimg.com/150/150/tech/grayscale`} title={`PC Z`} price={500000} href={`/components`} />
         </div>
       </div>
     </LayoutComponentPreview>