cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Adding _document, _app and Product View

Browse Source
This commit is contained in:
Belen Curcio 2020-09-29 16:02:09 -03:00
parent c10a4ce95b
commit 702f00933d
11 changed files with 145 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Navbar/Navbar.module.css
View File

@ -1,3 +1,3 @@
.root { .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;
} }

3
components/ProductView/ProductView.module.css Normal file
View File

@ -0,0 +1,3 @@
.root {
@apply flex flex-row h-screen py-12;
}

67
components/ProductView/ProductView.tsx Normal file
View File

@ -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<Props> = ({ productData, className }) => {
const rootClassName = cn(s.root, className);
return (
<div className={rootClassName}>
<div className="absolute h-12">
<h1>T-Shirt</h1>
</div>
<div className="absolute h-12">T-Shirt</div>
<div className="flex-1 h-full p-24">
<div className="bg-violet h-full"></div>
</div>
<div className="flex-1 flex flex-col">
<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>
</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">
S
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
M
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
L
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
XL
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
XXL
</span>
</div>
</section>
<section className="pb-12">
<p>{productData.description}</p>
</section>
<section className="pb-4">
<Button className="">Add to Cart</Button>
</section>
</div>
</div>
);
};
export default ProductView;

1
components/ProductView/index.ts Normal file
View File

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

5
components/Searchbar/Searchbar.module.css
View File

@ -3,12 +3,11 @@
} }
.container { .container {
@apply relative rounded-lg flex flex-row text-sm items-center; @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1;
background-color: #fafafa;
} }
.input { .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; min-width: 300px;
} }

1
components/index.ts
View File

@ -2,3 +2,4 @@ export { default as Avatar } from "./Avatar";
export { default as Footer } from "./Footer"; export { default as Footer } from "./Footer";
export { default as Navbar } from "./Navbar"; export { default as Navbar } from "./Navbar";
export { default as Searchbar } from "./Searchbar"; export { default as Searchbar } from "./Searchbar";
export { default as ProductView } from "./ProductView";

18
pages/_document.tsx Normal file
View File

@ -0,0 +1,18 @@
import Document_, { Html, Head, Main, NextScript } from "next/document";
export default class Document extends Document_ {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
{/**
* Here add your GA and more scripts.
*/}
</body>
</Html>
);
}
}

2
pages/index.tsx
View File

@ -9,7 +9,7 @@ export default function Home() {
description="Due to COVID-19, some orders may experience processing and delivery delays." description="Due to COVID-19, some orders may experience processing and delivery delays."
/> />
<Navbar /> <Navbar />
<Container className="px-4 py-5 h-screen"> <Container className="h-screen">
<div className="grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2"> <div className="grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2">
<div className="lg:row-span-2 lg:col-span-2 bg-violet h-full"></div> <div className="lg:row-span-2 lg:col-span-2 bg-violet h-full"></div>
<div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div> <div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>

50
pages/product/[id].tsx Normal file
View File

@ -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 (
<>
<Featurebar
title="Free Standard Shipping on orders over $99.99"
description="Due to COVID-19, some orders may experience processing and delivery delays."
/>
<Navbar />
<Container className="h-screen">
{router.isFallback ? (
<h1>Loading...</h1>
) : (
<ProductView productData={productData} />
)}
</Container>
<Footer></Footer>
</>
);
}

2
tailwind.config.js
View File

@ -10,7 +10,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
"accent-1": "#333", "accent-1": "#FAFAFA",
"accent-4": "#888", "accent-4": "#888",
violet: "#7928CA", violet: "#7928CA",
pink: "#FF0080", pink: "#FF0080",

8
ui/Button/Button.tsx
View File

@ -47,14 +47,6 @@ export default class Button extends React.Component<Props> {
data-variant={variant} data-variant={variant}
{...rest} {...rest}
> >
<svg
className="-ml-1 mr-3 h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
{children} {children}
</Component> </Component>
); );