Latest changes

components/product/ProductCard/ProductCard.tsx

@@ -8,6 +8,7 @@ interface Props {
   className?: string
   children?: any
   node: ProductData
+  variant?: 'slim'
 }
 
 interface ProductData {
@@ -17,28 +18,42 @@ interface ProductData {
   path: string
 }
 
-const ProductCard: FC<Props> = ({ className, node: productData }) => {
+const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
   const rootClassName = cn(s.root, className)
 
+  if (variant === 'slim') {
+    return (
+      <div className="relative overflow-hidden box-border">
+        <img
+          className="object-scale-down h-24"
+          src={p.images.edges[0].node.urlSmall}
+        />
+        <div className="absolute inset-0 flex items-center justify-end mr-8">
+          <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+            {p.name}
+          </span>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <Link href={`product${productData.path}`}>
+    <Link href={`product${p.path}`}>
       <div className={rootClassName}>
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
-            src={productData.images.edges[0].node.urlSmall}
+            src={p.images.edges[0].node.urlSmall}
           />
         </div>
         <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="flex flex-col flex-1 overflow-hidden">
             <div className="flex-1">
-              <h1 className={s.productTitle}>{productData.name}</h1>
+              <h1 className={s.productTitle}>{p.name}</h1>
             </div>
             <div className="flex-0">
-              <div className={s.productPrice}>
-                ${productData.prices.price.value}
-              </div>
+              <div className={s.productPrice}>${p.prices.price.value}</div>
             </div>
           </div>
           <div className={s.wishlistButton}>