ProductCard

components/product/ProductCard/ProductCard.module.css

@@ -1,3 +1,3 @@
 .root {
-  @apply w-full h-full flex flex-row px-2;
+  @apply relative w-full h-full flex flex-row p-6 box-border justify-between;
 }

components/product/ProductCard/ProductCard.tsx

@@ -1,32 +1,29 @@
-import cn from "classnames";
-import s from "./ProductCard.module.css";
-import React, { FunctionComponent } from "react";
-import { Heart } from "@components/icon";
+import cn from 'classnames'
+import s from './ProductCard.module.css'
+import { FC } from 'react'
+import { Heart } from '@components/icon'
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
-const ProductCard: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+const ProductCard: FC<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      <div className="absolute">
-        <h1 className="px-8 py-2 bg-white text-black font-bold text-3xl">
+      <div className="">
+        <h1 className="px-8 py-2 bg-white text-black font-bold text-2xl">
           T-Shirt
         </h1>
-        <div className="px-6 py-2 pb-4 bg-white text-black font-semibold inline-block">
+        <div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
           $50
         </div>
       </div>
-      <div className="absolute flex items-center justify-center h-12 w-12 bg-white text-black">
+      <div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
         <Heart />
       </div>
-      <div className="flex-1 h-full p-24">
-        <div className="bg-violet h-full"></div>
-      </div>
     </div>
-  );
-};
+  )
+}
 
-export default ProductCard;
+export default ProductCard

components/product/ProductCard/index.ts

@@ -1 +1 @@
-export { default } from "./ProductCard";
+export { default } from './ProductCard'

components/product/ProductGrid/ProductGrid.module.css

@@ -2,7 +2,28 @@
   @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
   min-height: calc((100vh - 80px - 56px) * 2);
 
-  & div:nth-child(1) {
-    @apply row-span-2 lg:col-span-2 bg-red-200 h-full;
+  & > * {
+    @apply row-span-1 lg:col-span-1 h-full bg-black;
+  }
+
+  & > div:nth-child(1),
+  & > div:nth-child(5) {
+    @apply row-span-2 lg:col-span-2 h-full;
+  }
+
+  & > div:nth-child(1) {
+    @apply bg-violet;
+  }
+
+  & > div:nth-child(3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(5) {
+    @apply bg-blue;
+  }
+
+  & > div:nth-child(6) {
+    @apply bg-cyan;
   }
 }

components/product/ProductGrid/ProductGrid.tsx

@@ -1,25 +1,22 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./ProductGrid.module.css";
-import ProductCard from "@components/ProductCard";
+import cn from 'classnames'
+import { FC } from 'react'
+import s from './ProductGrid.module.css'
+import ProductCard from '@components/product/ProductCard'
 interface Props {
-  className?: string;
-  children?: any;
-  products: [any];
+  className?: string
+  children?: any
+  products: [any]
 }
 
-const ProductView: FunctionComponent<Props> = ({ products, className }) => {
-  const rootClassName = cn(s.root, className);
+const ProductView: FC<Props> = ({ products, className }) => {
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      <div></div>
-      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
-      <div className="row-span-1 lg:col-span-1 bg-pink"></div>
-      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
-      <div className="row-span-2 lg:col-span-2 bg-blue h-full"></div>
-      <div className="row-span-1 lg:col-span-1 bg-cyan"></div>
+      {products.slice(0, 6).map((p) => (
+        <ProductCard {...p} />
+      ))}
     </div>
-  );
-};
+  )
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductGrid/index.ts

@@ -1 +1 @@
-export { default } from "./ProductGrid";
+export { default } from './ProductGrid'

components/product/ProductView/ProductView.tsx

@@ -1,18 +1,18 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./ProductView.module.css";
-import { Button } from "@components/ui";
-import { Swatch } from "@components/product";
+import cn from 'classnames'
+import { FC } from 'react'
+import s from './ProductView.module.css'
+import { Button } from '@components/ui'
+import { Swatch } from '@components/product'
 
 interface Props {
-  className?: string;
-  children?: any;
-  productData: ProductData;
+  className?: string
+  children?: any
+  productData: ProductData
 }
 
-const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
-  const rootClassName = cn(s.root, className);
-  console.log(productData);
+const ProductView: FC<Props> = ({ productData, className }) => {
+  const rootClassName = cn(s.root, className)
+  console.log(productData)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -53,7 +53,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
         </section>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductView/index.ts

@@ -1 +1 @@
-export { default } from "./ProductView";
+export { default } from './ProductView'

components/product/Swatch/Swatch.tsx

@@ -1,35 +1,30 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Swatch.module.css";
-import { Colors } from "@components/ui/types";
+import cn from 'classnames'
+import { FC } from 'react'
+import s from './Swatch.module.css'
+import { Colors } from '@components/ui/types'
 
 interface Props {
-  className?: string;
-  children?: any;
-  active?: boolean;
-  color?: Colors;
-  size?: string;
+  className?: string
+  children?: any
+  active?: boolean
+  color?: Colors
+  size?: string
 }
 
-const Swatch: FunctionComponent<Props> = ({
-  className,
-  size,
-  color,
-  active,
-}) => {
+const Swatch: FC<Props> = ({ className, size, color, active }) => {
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
       [s.size]: size,
-      [s.colorPink]: color === "pink",
-      [s.colorWhite]: color === "white",
-      [s.colorBlack]: color === "black",
-      [s.colorViolet]: color === "violet",
+      [s.colorPink]: color === 'pink',
+      [s.colorWhite]: color === 'white',
+      [s.colorBlack]: color === 'black',
+      [s.colorViolet]: color === 'violet',
     },
     className
-  );
-  return <span className={rootClassName}>{size ? size : null}</span>;
-};
+  )
+  return <span className={rootClassName}>{size ? size : null}</span>
+}
 
-export default Swatch;
+export default Swatch

components/product/Swatch/index.ts

@@ -1 +1 @@
-export { default } from "./Swatch";
+export { default } from './Swatch'

components/product/index.ts

@@ -1,4 +1,4 @@
-export { default as Swatch } from "./Swatch";
-export { default as ProductView } from "./ProductView";
-export { default as ProductCard } from "./ProductCard";
-export { default as ProductGrid } from "./ProductGrid";
+export { default as Swatch } from './Swatch'
+export { default as ProductView } from './ProductView'
+export { default as ProductCard } from './ProductCard'
+export { default as ProductGrid } from './ProductGrid'

components/product/types.ts

@@ -1,5 +1,5 @@
-import { Colors } from "@components/ui/types";
-export { Product } from "@lib/bigcommerce";
+import { Colors } from '@components/ui/types'
+export { Product } from '@lib/bigcommerce'
 
 // export type ProductData = {
 //   title: string;