From 702f00933dd5d17f0e0fc25648a761e307835286 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 29 Sep 2020 16:02:09 -0300 Subject: [PATCH] Adding _document, _app and Product View --- components/Navbar/Navbar.module.css | 2 +- components/ProductView/ProductView.module.css | 3 + components/ProductView/ProductView.tsx | 67 +++++++++++++++++++ components/ProductView/index.ts | 1 + components/Searchbar/Searchbar.module.css | 5 +- components/index.ts | 1 + pages/_document.tsx | 18 +++++ pages/index.tsx | 2 +- pages/product/[id].tsx | 50 ++++++++++++++ tailwind.config.js | 2 +- ui/Button/Button.tsx | 8 --- 11 files changed, 145 insertions(+), 14 deletions(-) create mode 100644 components/ProductView/ProductView.module.css create mode 100644 components/ProductView/ProductView.tsx create mode 100644 components/ProductView/index.ts create mode 100644 pages/_document.tsx create mode 100644 pages/product/[id].tsx diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index ee12e384c..7f08b4c9c 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -1,3 +1,3 @@ .root { - @apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b; + @apply flex justify-between items-center flex-row px-6 h-20 relative; } diff --git a/components/ProductView/ProductView.module.css b/components/ProductView/ProductView.module.css new file mode 100644 index 000000000..3ee34e54a --- /dev/null +++ b/components/ProductView/ProductView.module.css @@ -0,0 +1,3 @@ +.root { + @apply flex flex-row h-screen py-12; +} diff --git a/components/ProductView/ProductView.tsx b/components/ProductView/ProductView.tsx new file mode 100644 index 000000000..7d4c52a1d --- /dev/null +++ b/components/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 "ui"; + +interface ProductData { + description: string; +} + +interface Props { + className?: string; + children?: any; + productData: ProductData; +} + +const ProductView: FunctionComponent = ({ productData, className }) => { + const rootClassName = cn(s.root, className); + return ( +
+
+

T-Shirt

+
+
T-Shirt
+
+
+
+
+
+

Color

+
+ + + +
+
+
+

Size

+
+ + S + + + M + + + L + + + XL + + + XXL + +
+
+
+

{productData.description}

+
+
+ +
+
+
+ ); +}; + +export default ProductView; diff --git a/components/ProductView/index.ts b/components/ProductView/index.ts new file mode 100644 index 000000000..0885bc92e --- /dev/null +++ b/components/ProductView/index.ts @@ -0,0 +1 @@ +export { default } from "./ProductView"; diff --git a/components/Searchbar/Searchbar.module.css b/components/Searchbar/Searchbar.module.css index 844b371e3..e1e8e55e8 100644 --- a/components/Searchbar/Searchbar.module.css +++ b/components/Searchbar/Searchbar.module.css @@ -3,12 +3,11 @@ } .container { - @apply relative rounded-lg flex flex-row text-sm items-center; - background-color: #fafafa; + @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1; } .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-4; + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4; min-width: 300px; } diff --git a/components/index.ts b/components/index.ts index 7a3a2194e..2d5c171b0 100644 --- a/components/index.ts +++ b/components/index.ts @@ -2,3 +2,4 @@ export { default as Avatar } from "./Avatar"; export { default as Footer } from "./Footer"; export { default as Navbar } from "./Navbar"; export { default as Searchbar } from "./Searchbar"; +export { default as ProductView } from "./ProductView"; diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 000000000..693a1c1ae --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,18 @@ +import Document_, { Html, Head, Main, NextScript } from "next/document"; + +export default class Document extends Document_ { + render() { + return ( + + + +
+ + {/** + * Here add your GA and more scripts. + */} + + + ); + } +} diff --git a/pages/index.tsx b/pages/index.tsx index 6ad148a75..2c292173f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,7 +9,7 @@ export default function Home() { description="Due to COVID-19, some orders may experience processing and delivery delays." /> - +
diff --git a/pages/product/[id].tsx b/pages/product/[id].tsx new file mode 100644 index 000000000..05ec07c95 --- /dev/null +++ b/pages/product/[id].tsx @@ -0,0 +1,50 @@ +import { useRouter } from "next/router"; +import { Featurebar, Button, Container } from "ui"; +import { Navbar, Footer, ProductView } from "components"; +import ErrorPage from "next/error"; + +export async function getStaticProps() { + const productData = { + 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. + Like everything in this collection, it is extremely limited edition + and available for 10 days only. This is a limited edition production + run. Printing starts when the drop ends. Reminder: Bad Boys For + Life. Shipping may take 10+ days due to COVID-19. + `, + }; + return { + props: { + productData, + }, + }; +} + +export async function getStaticPaths() { + return { + paths: [], + fallback: true, + }; +} + +export default function Home({ productData }) { + const router = useRouter(); + return ( + <> + + + + {router.isFallback ? ( +

Loading...

+ ) : ( + + )} + +
+ + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 514671aa7..29f406734 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { theme: { extend: { colors: { - "accent-1": "#333", + "accent-1": "#FAFAFA", "accent-4": "#888", violet: "#7928CA", pink: "#FF0080", diff --git a/ui/Button/Button.tsx b/ui/Button/Button.tsx index de1750838..20103eae7 100644 --- a/ui/Button/Button.tsx +++ b/ui/Button/Button.tsx @@ -47,14 +47,6 @@ export default class Button extends React.Component { data-variant={variant} {...rest} > - - - - {children} );