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 Sidebar

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

38
components/product/ProductView/ProductView.tsx
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">