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

changes to the layout

Browse Source
This commit is contained in:
Belen Curcio
2020-10-13 11:43:06 -03:00
parent 30a8677816
commit 038d02acc2
11 changed files with 132 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/product/ProductView/ProductView.tsx
View File

@@ -1,7 +1,7 @@
import cn from 'classnames'
import { FC, useState } from 'react'
import s from './ProductView.module.css'
import { Button } from '@components/ui'
import { Button, Container } from '@components/ui'
import { Swatch } from '@components/product'
import { Colors } from '@components/ui/types'
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
@@ -43,76 +43,76 @@ const ProductView: FC<Props> = ({ product, className }) => {
const activeColor = choices.color
return (
<div className={cn(s.root, className)}>
<div className="absolute">
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
{product.name}
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
{product.prices?.price.value}
{` `}
{product.prices?.price.currencyCode}
</div>
</div>
<div className="flex-1 h-48 p-24 relative min-h-screen overflow-hidden">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={product.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className=" absolute inset-24 z-0 bg-violet"></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">
{COLORS.map((color) => (
<Swatch
key={color}
color={color}
active={color === activeColor}
onClick={() =>
setChoices((choices) => {
return { ...choices, color }
})
}
/>
))}
<Container>
<div className="relative flex flex-row items-start overflow-hidden">
<div className="absolute top-0 left-0 z-50">
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
{product.name}
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-bold inline-block traking">
{product.prices?.price.value}
{` `}
{product.prices?.price.currencyCode}
</div>
</section>
<section className="pb-4">
<h2 className="uppercase font-medium">Size</h2>
<div className="flex flex-row py-4">
{SIZES.map((size) => {
return (
</div>
<div className="flex-1 p-24 relative fit overflow-hidden box-border">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={product.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className={s.squareBg}></div>
</div>
<div className="flex-1 flex flex-col">
<section className="pt-24">
<h2 className="uppercase font-medium">Color</h2>
<div className="flex flex-row py-4">
{COLORS.map((color) => (
<Swatch
size={size.toUpperCase()}
key={`size-${size}`}
active={size === activeSize}
key={color}
color={color}
active={color === activeColor}
onClick={() =>
setChoices((choices) => {
return { ...choices, size }
return { ...choices, color }
})
}
/>
)
})}
</div>
</section>
<section className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</section>
<section className="pb-4">
<Button type="button" className={s.button} onClick={addToCart}>
Add to Cart
</Button>
</section>
))}
</div>
</section>
<section className="pb-4">
<h2 className="uppercase font-medium">Size</h2>
<div className="flex flex-row py-4">
{SIZES.map((size) => {
return (
<Swatch
size={size.toUpperCase()}
key={`size-${size}`}
active={size === activeSize}
onClick={() =>
setChoices((choices) => ({ ...choices, size }))
}
/>
)
})}
</div>
</section>
<section className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</section>
<section className="pb-4">
<Button type="button" className={s.button} onClick={addToCart}>
Add to Cart
</Button>
</section>
</div>
</div>
</div>
</Container>
)
}