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 productView

Browse Source
This commit is contained in:
Belen Curcio
2020-10-20 14:02:06 -03:00
parent 5a05cb41ea
commit c9ee2af3e5
2 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { getProductOptions } from '../helpers'
import s from './ProductView.module.css'
import { isDesktop } from '@lib/browser'
import cn from 'classnames'
interface Props {
className?: string
children?: any
@@ -63,22 +64,21 @@ const ProductView: FC<Props> = ({ product, className }) => {
],
}}
/>
<div className="relative flex flex-row items-start fit my-12">
<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 className={cn(s.root, 'fit')}>
<div className={s.productDisplay}>
<div className={s.squareBg}></div>
<div className={s.nameBox}>
<h1 className={s.name}>{product.name}</h1>
<div className={s.price}>
{product.prices?.price.value}
{` `}
{product.prices?.price.currencyCode}
</div>
</div>
</div>
<div className="flex-1 px-24 pb-0 relative fit box-border">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<div className={s.productSliderContainer}>
<ProductSlider>
{/** TODO: Change with Image Component */}
{/** TODO: Change with Image Component **/}
{product.images.edges?.map((image, i) => (
<img
key={image?.node.urlSmall}
@@ -95,11 +95,9 @@ const ProductView: FC<Props> = ({ product, className }) => {
<img src="/slider-arrows.png" />
</div>
)}
<div className={s.squareBg}></div>
</div>
<div className="flex-1 flex flex-col pt-24">
<div className="flex flex-col md:pt-24">
<section>
{options?.map((opt: any) => (
<div className="pb-4" key={opt.displayName}>