crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki 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
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 {
@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 {
@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;
}

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 Navbar } from "./Navbar";
export { default as Searchbar } from "./Searchbar";
export { default as ProductView } from "./ProductView";