Adding Sidebar

components/cart/CartSidebarView/CartSidebarView.module.css

@@ -0,0 +1,2 @@
+.root {
+}

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -0,0 +1,73 @@
+import React, { FunctionComponent } from "react";
+// import s from "./CartSidebarView.module.css";
+import { Button } from "@components/ui";
+import { Trash } from "@components/icon";
+
+interface Props {}
+
+const CartSidebarView: FunctionComponent<Props> = () => {
+  return (
+    <>
+      <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
+        <div className="flex items-start justify-between space-x-3">
+          <div className="space-y-1">
+            <h2 className="text-lg leading-7 font-medium text-gray-900 uppercase">
+              My Cart
+            </h2>
+          </div>
+          <div className="h-7 flex items-center">
+            <button
+              aria-label="Close panel"
+              className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
+            >
+              <svg
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <div className="px-4 sm:px-6 py-4">
+        <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+          <li className="flex flex-row space-x-6">
+            <div className="h-12 w-12 bg-violet"></div>
+            <div className="flex-1 flex flex-col">
+              <span>T-Shirt</span>
+              <div className="py-2">
+                <span>-</span>
+                <input
+                  className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
+                  value="1"
+                />
+                <span>+</span>
+              </div>
+            </div>
+            <div className="flex flex-col space-y-2">
+              <span>$50.00</span>
+              <span className="flex justify-end">
+                <Trash />
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
+        <Button>Proceed to Checkout</Button>
+      </div>
+    </>
+  );
+};
+
+export default CartSidebarView;

components/cart/CartSidebarView/index.ts

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

components/cart/index.ts

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

components/core/Layout/Layout.tsx

@@ -2,8 +2,8 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Layout.module.css";
 import { Navbar, Featurebar } from "@components/core";
-import { Container } from "@components/ui";
-
+import { Container, Sidebar } from "@components/ui";
+import { CartSidebarView } from "@components/cart";
 interface Props {
   className?: string;
   children?: any;
@@ -19,6 +19,9 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
       />
       <Navbar />
       <main className="h-screen">{children}</main>
+      <Sidebar>
+        <CartSidebarView />
+      </Sidebar>
     </Container>
   );
 };

components/icon/Trash.tsx

@@ -12,28 +12,28 @@ const Trash = ({ ...props }) => {
     >
       <path
         d="M3 6H21"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M10 11V17"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14 11V17"
-        stroke="white"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

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";

components/types.ts

@@ -0,0 +1 @@
+export type Colors = "violet" | "black" | "pink" | "white";

components/ui/Button/Button.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply cursor-pointer inline-flex px-8 py-2 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center;
+  @apply cursor-pointer inline-flex px-10 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center;
 }
 
 .root:hover {

components/ui/Sidebar/Sidebar.module.css

@@ -0,0 +1,2 @@
+.root {
+}

components/ui/Sidebar/Sidebar.tsx

@@ -0,0 +1,29 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Sidebar.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
+            <div className="w-screen max-w-2xl">
+              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
+                <div className="flex-1">{children}</div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

components/ui/Sidebar/index.ts

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

components/ui/index.ts

@@ -1,4 +1,4 @@
 export { default as Button } from "./Button";
 export { default as Container } from "./Container";
-
+export { default as Sidebar } from "./Sidebar";
 export { default as Logo } from "./Logo";

package.json

@@ -11,6 +11,7 @@
     "@tailwindcss/ui": "^0.6.2",
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6",
+    "lodash": "^4.17.20",
     "next": "^9.5.4-canary.20",
     "postcss-nested": "^5.0.0",
     "react": "^16.13.1",

pages/product/[id].tsx

@@ -4,6 +4,7 @@ import { ProductView } from "@components/product";
 
 export async function getStaticProps() {
   const productData = {
+    title: "T-Shirt",
     description: `
       Nothing undercover about this tee. Nope. This is the official Bad
       Boys tee. Printed in white or black ink on Black, Brown, or Oatmeal.
@@ -12,6 +13,9 @@ export async function getStaticProps() {
       run. Printing starts when the drop ends. Reminder: Bad Boys For
       Life. Shipping may take 10+ days due to COVID-19.
     `,
+    price: "$50",
+    colors: ["black", "white", "pink"],
+    sizes: ["s", "m", "l", "xl", "xxl"],
   };
   return {
     props: {