Adding Sidebar

This commit is contained in:
Belen Curcio 2020-09-30 10:51:53 -03:00
parent 5e115ade3c
commit cafe205808
20 changed files with 205 additions and 30 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

@ -12,28 +12,28 @@ const Trash = ({ ...props }) => {
>
<path
d="M3 6H21"
stroke="white"
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="white"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 11V17"
stroke="white"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14 11V17"
stroke="white"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"

View File

@ -3,6 +3,5 @@
}
.button {
@apply py-5 uppercase text-center;
min-width: 300px;
}

View File

@ -2,9 +2,14 @@ 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 {
@ -15,14 +20,15 @@ interface Props {
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">
T-Shirt
{productData.title}
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
$50
{productData.price}
</div>
</div>
<div className="flex-1 h-full p-24">
@ -32,29 +38,19 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
<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>
{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">
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
S
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
M
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-900 flex items-center justify-center cursor-pointer">
L
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
XL
</span>
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
XXL
</span>
<Swatch size="S" />
<Swatch size="M" />
<Swatch size="L" />
<Swatch size="XL" />
<Swatch size="XXL" />
</div>
</section>
<section className="pb-12">

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

@ -1,5 +1,5 @@
.root {
@apply cursor-pointer inline-flex px-8 py-2 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;
@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 {

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

@ -11,6 +11,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: {