forked from crowetic/commerce
Adding _document, _app and Product View
This commit is contained in:
parent
c10a4ce95b
commit
702f00933d
@ -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;
|
||||
}
|
||||
|
3
components/ProductView/ProductView.module.css
Normal file
3
components/ProductView/ProductView.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.root {
|
||||
@apply flex flex-row h-screen py-12;
|
||||
}
|
67
components/ProductView/ProductView.tsx
Normal file
67
components/ProductView/ProductView.tsx
Normal 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
1
components/ProductView/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./ProductView";
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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";
|
||||
|
18
pages/_document.tsx
Normal file
18
pages/_document.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
@ -9,7 +9,7 @@ export default function Home() {
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<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="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>
|
||||
|
50
pages/product/[id].tsx
Normal file
50
pages/product/[id].tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
@ -10,7 +10,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"accent-1": "#333",
|
||||
"accent-1": "#FAFAFA",
|
||||
"accent-4": "#888",
|
||||
violet: "#7928CA",
|
||||
pink: "#FF0080",
|
||||
|
@ -47,14 +47,6 @@ export default class Button extends React.Component<Props> {
|
||||
data-variant={variant}
|
||||
{...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}
|
||||
</Component>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user