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

Arch and components by functionality

Browse Source
This commit is contained in:
Belen Curcio
2020-09-29 19:22:24 -03:00
parent 7c890c7587
commit 9c3cb31b49
41 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
components/product/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 "@components/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;