This commit is contained in:
Luis Alvarez 2020-09-30 11:48:20 -05:00
commit 2a29cfe3c7
25 changed files with 426 additions and 3 deletions

View File

@ -0,0 +1,2 @@
.root {
}

View File

@ -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<Props> = () => {
return (
<>
<header className="px-4 py-6 sm:px-6 border-b border-gray-200">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<h2 className="text-lg leading-7 font-medium text-gray-900 uppercase">
My Cart
</h2>
</div>
<div className="h-7 flex items-center">
<button
aria-label="Close panel"
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
>
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</header>
<div className="px-4 sm:px-6 py-4">
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
<li className="flex flex-row space-x-6">
<div className="h-12 w-12 bg-violet"></div>
<div className="flex-1 flex flex-col">
<span>T-Shirt</span>
<div className="py-2">
<span>-</span>
<input
className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
value="1"
/>
<span>+</span>
</div>
</div>
<div className="flex flex-col space-y-2">
<span>$50.00</span>
<span className="flex justify-end">
<Trash />
</span>
</div>
</li>
</ul>
</div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
<Button>Proceed to Checkout</Button>
</div>
</>
);
};
export default CartSidebarView;

View File

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

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

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

View File

@ -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<Props> = ({ className, children }) => {
/>
<Navbar />
<main className="h-screen">{children}</main>
{/* <Sidebar>
<CartSidebarView />
</Sidebar> */}
</Container>
);
};

View File

@ -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<Props> = ({ className }) => {
const rootClassName = cn(s.root, className);
return (
<Container className={rootClassName}>
<Logo />
<div className="flex flex-row h-full content-center flex-1">
<Searchbar />
<nav className="hidden flex-row items-center px-3 lg:flex">
<a className="pr-4">All</a>
<a className="pr-4">Clothes</a>
<a>Accesories</a>
</nav>
</div>
<nav className="flex flex-row items-center">
<Bag className="mr-6" />
<Heart className="mr-6" />
<Avatar />
</nav>
</Container>
);
};
export default Navbar;

View File

@ -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";

View File

@ -0,0 +1,38 @@
import React from "react";
const Bag = ({ ...props }) => {
return (
<svg
width="20"
height="22"
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 5H19"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default Bag;

View File

@ -0,0 +1,24 @@
import React from "react";
const Heart = ({ ...props }) => {
return (
<svg
width="24"
height="20"
viewBox="0 0 24 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M20.84 2.61C20.3292 2.099 19.7228 1.69365 19.0554 1.41708C18.3879 1.14052 17.6725 0.998175 16.95 0.998175C16.2275 0.998175 15.5121 1.14052 14.8446 1.41708C14.1772 1.69365 13.5708 2.099 13.06 2.61L12 3.67L10.94 2.61C9.9083 1.57831 8.50903 0.998709 7.05 0.998709C5.59096 0.998709 4.19169 1.57831 3.16 2.61C2.1283 3.64169 1.54871 5.04097 1.54871 6.5C1.54871 7.95903 2.1283 9.35831 3.16 10.39L4.22 11.45L12 19.23L19.78 11.45L20.84 10.39C21.351 9.87924 21.7563 9.27281 22.0329 8.60536C22.3095 7.9379 22.4518 7.22249 22.4518 6.5C22.4518 5.77751 22.3095 5.0621 22.0329 4.39464C21.7563 3.72719 21.351 3.12076 20.84 2.61V2.61Z"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default Heart;

View File

@ -0,0 +1,45 @@
import React from "react";
const Trash = ({ ...props }) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M3 6H21"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 11V17"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14 11V17"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default Trash;

View File

@ -0,0 +1,3 @@
export { default as Bag } from "./Bag";
export { default as Heart } from "./Heart";
export { default as Trash } from "./Trash";

View File

@ -0,0 +1,7 @@
.root {
@apply flex flex-row h-screen py-12;
}
.button {
min-width: 300px;
}

View File

@ -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<Props> = ({ productData, className }) => {
const rootClassName = cn(s.root, className);
console.log(productData);
return (
<div className={rootClassName}>
<div className="absolute">
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
{productData.title}
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
{productData.price}
</div>
</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">
{productData.colors.map((c) => (
<Swatch color={c} />
))}
</div>
</section>
<section className="pb-4">
<h2 className="uppercase font-medium">Size</h2>
<div className="flex flex-row py-4">
<Swatch size="S" />
<Swatch size="M" />
<Swatch size="L" />
<Swatch size="XL" />
<Swatch size="XXL" />
</div>
</section>
<section className="pb-12">
<p>{productData.description}</p>
</section>
<section className="pb-4">
<Button className={s.button}>Add to Cart</Button>
</section>
</div>
</div>
);
};
export default ProductView;

View File

@ -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;
}

View File

@ -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<Props> = ({
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 <span className={rootClassName}>{size ? size : null}</span>;
};
export default Swatch;

View File

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

View File

@ -1 +1,2 @@
export { default as ProductView } from "./ProductView";
export { default as Swatch } from "./Swatch";

1
components/types.ts Normal file
View File

@ -0,0 +1 @@
export type Colors = "violet" | "black" | "pink" | "white";

View File

@ -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;
}

View File

@ -0,0 +1,2 @@
.root {
}

View File

@ -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<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className);
return (
<div className={rootClassName}>
<div className="fixed inset-0 overflow-hidden">
<div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
<div className="w-screen max-w-2xl">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<div className="flex-1">{children}</div>
</div>
</div>
</section>
</div>
</div>
</div>
);
};
export default Sidebar;

View File

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

View File

@ -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";

View File

@ -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",

View File

@ -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: {