Adding Sidebar

components/product/ProductView/ProductView.module.css

@@ -3,6 +3,5 @@
 }
 
 .button {
-  @apply py-5 uppercase text-center;
   min-width: 300px;
 }

components/product/ProductView/ProductView.tsx

@@ -2,9 +2,14 @@ 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 { Colors } from "@components/types";
 interface ProductData {
+  title: string;
+  price: string;
   description: string;
+  colors: [Colors];
+  sizes: [string];
 }
 
 interface Props {
@@ -15,14 +20,15 @@ interface Props {
 
 const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
   const rootClassName = cn(s.root, className);
+  console.log(productData);
   return (
     <div className={rootClassName}>
       <div className="absolute">
         <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
-          T-Shirt
+          {productData.title}
         </h1>
         <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
-          $50
+          {productData.price}
         </div>
       </div>
       <div className="flex-1 h-full p-24">
@@ -32,29 +38,19 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
         <section className="pb-4">
           <h2 className="uppercase font-medium">Color</h2>
           <div className="flex flex-row py-4">
-            <span className="h-12 w-12 bg-black rounded-full mr-3"></span>
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200"></span>
-            <span className="h-12 w-12 bg-pink rounded-full"></span>
+            {productData.colors.map((c) => (
+              <Swatch color={c} />
+            ))}
           </div>
         </section>
         <section className="pb-4">
           <h2 className="uppercase font-medium">Size</h2>
           <div className="flex flex-row py-4">
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
-              S
-            </span>
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
-              M
-            </span>
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-900 flex items-center justify-center cursor-pointer">
-              L
-            </span>
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
-              XL
-            </span>
-            <span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
-              XXL
-            </span>
+            <Swatch size="S" />
+            <Swatch size="M" />
+            <Swatch size="L" />
+            <Swatch size="XL" />
+            <Swatch size="XXL" />
           </div>
         </section>
         <section className="pb-12">

components/product/Swatch/Swatch.module.css

@@ -0,0 +1,25 @@
+.root {
+  @apply h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out;
+}
+
+.active,
+.root:hover {
+  @apply border-gray-700;
+}
+
+.colorViolet {
+  @apply bg-violet;
+}
+
+.colorPink {
+  @apply bg-pink;
+}
+
+.colorBlack {
+  @apply bg-black;
+}
+
+.colorWhite,
+.size {
+  @apply bg-white;
+}

components/product/Swatch/Swatch.tsx

@@ -0,0 +1,35 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Swatch.module.css";
+import { Colors } from "@components/types";
+
+interface Props {
+  className?: string;
+  children?: any;
+  active?: boolean;
+  color?: Colors;
+  size?: string;
+}
+
+const Swatch: FunctionComponent<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",
+    },
+    className
+  );
+  return <span className={rootClassName}>{size ? size : null}</span>;
+};
+
+export default Swatch;

components/product/Swatch/index.ts

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

components/product/index.ts

@@ -1 +1,2 @@
 export { default as ProductView } from "./ProductView";
+export { default as Swatch } from "./Swatch";