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..22113ad4f 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/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index e69de29bb..e849205d3 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -0,0 +1,34 @@ +import cn from "classnames"; +import React, { FunctionComponent } from "react"; +import s from "./Navbar.module.css"; +import { Logo, Container } from "@components/ui"; +import { Avatar, Searchbar } from "@components/core"; +import { Heart, Bag } from "@components/icon"; +interface Props { + className?: string; + children?: any; +} + +const Navbar: FunctionComponent = ({ className }) => { + const rootClassName = cn(s.root, className); + return ( + + +
+ + +
+ + + ); +}; + +export default Navbar; diff --git a/components/core/index.ts b/components/core/index.ts index e69de29bb..3aab7b5ca 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -0,0 +1,6 @@ +export { default as Avatar } from "./Avatar"; +export { default as Featurebar } from "./Featurebar"; +export { default as Footer } from "./Footer"; +export { default as Layout } from "./Layout"; +export { default as Navbar } from "./Navbar"; +export { default as Searchbar } from "./Searchbar"; diff --git a/components/icon/Bag.tsx b/components/icon/Bag.tsx index e69de29bb..6893fbac8 100644 --- a/components/icon/Bag.tsx +++ b/components/icon/Bag.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +const Bag = ({ ...props }) => { + return ( + + + + + + ); +}; + +export default Bag; diff --git a/components/icon/Heart.tsx b/components/icon/Heart.tsx index e69de29bb..051f57b01 100644 --- a/components/icon/Heart.tsx +++ b/components/icon/Heart.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +const Heart = ({ ...props }) => { + return ( + + + + ); +}; + +export default Heart; diff --git a/components/icon/Trash.tsx b/components/icon/Trash.tsx index e69de29bb..e1b6c8ce7 100644 --- a/components/icon/Trash.tsx +++ b/components/icon/Trash.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +const Trash = ({ ...props }) => { + return ( + + + + + + + ); +}; + +export default Trash; diff --git a/components/icon/index.ts b/components/icon/index.ts index e69de29bb..e354c1755 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -0,0 +1,3 @@ +export { default as Bag } from "./Bag"; +export { default as Heart } from "./Heart"; +export { default as Trash } from "./Trash"; diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index e69de29bb..c3dd37294 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -0,0 +1,7 @@ +.root { + @apply flex flex-row h-screen py-12; +} + +.button { + min-width: 300px; +} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index e69de29bb..84535f104 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -0,0 +1,67 @@ +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 { + className?: string; + children?: any; + productData: ProductData; +} + +const ProductView: FunctionComponent = ({ productData, className }) => { + const rootClassName = cn(s.root, className); + console.log(productData); + return ( +
+
+

+ {productData.title} +

+
+ {productData.price} +
+
+
+
+
+
+
+

Color

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

Size

+
+ + + + + +
+
+
+

{productData.description}

+
+
+ +
+
+
+ ); +}; + +export default ProductView; 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 e69de29bb..bdc88bb33 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -0,0 +1,19 @@ +.root { + @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 { + @apply bg-white text-black border-black; +} + +.root:focus { + @apply border-gray-700 shadow-outline; +} + +.root:active { + @apply bg-gray-700; +} + +s.filled { + @apply text-white bg-black; +} 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 5b45cf5b8..54de461dd 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,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: {