diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx new file mode 100644 index 000000000..11d24d234 --- /dev/null +++ b/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 = () => { + return ( + <> +
+
+
+

+ My Cart +

+
+
+ +
+
+
+ +
+ +
+ +
+ +
+ + ); +}; + +export default CartSidebarView; diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts new file mode 100644 index 000000000..5978c0194 --- /dev/null +++ b/components/cart/CartSidebarView/index.ts @@ -0,0 +1 @@ +export { default } from "./CartSidebarView"; diff --git a/components/cart/index.ts b/components/cart/index.ts new file mode 100644 index 000000000..bc42bb259 --- /dev/null +++ b/components/cart/index.ts @@ -0,0 +1 @@ +export { default as CartSidebarView } from "./CartSidebarView"; diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 71f3e6668..4d8556d07 100644 --- a/components/core/Layout/Layout.tsx +++ b/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 = ({ className, children }) => { />
{children}
+ + + ); }; diff --git a/components/icon/Trash.tsx b/components/icon/Trash.tsx index 76b0fbc83..e1b6c8ce7 100644 --- a/components/icon/Trash.tsx +++ b/components/icon/Trash.tsx @@ -12,28 +12,28 @@ const Trash = ({ ...props }) => { > = ({ productData, className }) => { const rootClassName = cn(s.root, className); + console.log(productData); return (

- T-Shirt + {productData.title}

- $50 + {productData.price}
@@ -32,29 +38,19 @@ const ProductView: FunctionComponent = ({ productData, className }) => {

Color

- - - + {productData.colors.map((c) => ( + + ))}

Size

- - S - - - M - - - L - - - XL - - - XXL - + + + + +
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css new file mode 100644 index 000000000..8eb96e58a --- /dev/null +++ b/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; +} diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx new file mode 100644 index 000000000..99fe31ca9 --- /dev/null +++ b/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 = ({ + 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 {size ? size : null}; +}; + +export default Swatch; diff --git a/components/product/Swatch/index.ts b/components/product/Swatch/index.ts new file mode 100644 index 000000000..b79dc0ff5 --- /dev/null +++ b/components/product/Swatch/index.ts @@ -0,0 +1 @@ +export { default } from "./Swatch"; diff --git a/components/product/index.ts b/components/product/index.ts index d5adcbac5..77b944983 100644 --- a/components/product/index.ts +++ b/components/product/index.ts @@ -1 +1,2 @@ export { default as ProductView } from "./ProductView"; +export { default as Swatch } from "./Swatch"; diff --git a/components/types.ts b/components/types.ts new file mode 100644 index 000000000..0ed566938 --- /dev/null +++ b/components/types.ts @@ -0,0 +1 @@ +export type Colors = "violet" | "black" | "pink" | "white"; diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index df6b46eb5..bdc88bb33 100644 --- a/components/ui/Button/Button.module.css +++ b/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 { diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/components/ui/Sidebar/Sidebar.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx new file mode 100644 index 000000000..a74da8026 --- /dev/null +++ b/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 = ({ className, children }) => { + const rootClassName = cn(s.root, className); + return ( +
+
+
+
+
+
+
{children}
+
+
+
+
+
+
+ ); +}; + +export default Sidebar; diff --git a/components/ui/Sidebar/index.ts b/components/ui/Sidebar/index.ts new file mode 100644 index 000000000..123c2e4a1 --- /dev/null +++ b/components/ui/Sidebar/index.ts @@ -0,0 +1 @@ +export { default } from "./Sidebar"; diff --git a/components/ui/index.ts b/components/ui/index.ts index e643270a1..531a3bd28 100644 --- a/components/ui/index.ts +++ b/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"; diff --git a/package.json b/package.json index 19b5bfef8..d85554794 100644 --- a/package.json +++ b/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", diff --git a/pages/product/[id].tsx b/pages/product/[id].tsx index 347459bee..e5a7801fe 100644 --- a/pages/product/[id].tsx +++ b/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: {