mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Adding Sidebar
This commit is contained in:
parent
5e115ade3c
commit
cafe205808
@ -0,0 +1,2 @@
|
||||
.root {
|
||||
}
|
73
components/cart/CartSidebarView/CartSidebarView.tsx
Normal file
73
components/cart/CartSidebarView/CartSidebarView.tsx
Normal 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;
|
1
components/cart/CartSidebarView/index.ts
Normal file
1
components/cart/CartSidebarView/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./CartSidebarView";
|
1
components/cart/index.ts
Normal file
1
components/cart/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as CartSidebarView } from "./CartSidebarView";
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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"
|
||||
|
@ -3,6 +3,5 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply py-5 uppercase text-center;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
@ -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">
|
||||
|
25
components/product/Swatch/Swatch.module.css
Normal file
25
components/product/Swatch/Swatch.module.css
Normal 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;
|
||||
}
|
35
components/product/Swatch/Swatch.tsx
Normal file
35
components/product/Swatch/Swatch.tsx
Normal 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;
|
1
components/product/Swatch/index.ts
Normal file
1
components/product/Swatch/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./Swatch";
|
@ -1 +1,2 @@
|
||||
export { default as ProductView } from "./ProductView";
|
||||
export { default as Swatch } from "./Swatch";
|
||||
|
1
components/types.ts
Normal file
1
components/types.ts
Normal file
@ -0,0 +1 @@
|
||||
export type Colors = "violet" | "black" | "pink" | "white";
|
@ -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 {
|
||||
|
2
components/ui/Sidebar/Sidebar.module.css
Normal file
2
components/ui/Sidebar/Sidebar.module.css
Normal file
@ -0,0 +1,2 @@
|
||||
.root {
|
||||
}
|
29
components/ui/Sidebar/Sidebar.tsx
Normal file
29
components/ui/Sidebar/Sidebar.tsx
Normal 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;
|
1
components/ui/Sidebar/index.ts
Normal file
1
components/ui/Sidebar/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./Sidebar";
|
@ -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";
|
||||
|
@ -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",
|
||||
|
@ -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: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user