4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-24 10:25:47 -05:00
commit d92e4de42b
27 changed files with 599 additions and 807 deletions

View File

@ -1,8 +1,9 @@
import { ChangeEvent, useEffect, useState } from 'react'
import Image from 'next/image'
import { Trash, Plus, Minus } from '@components/icon' import { Trash, Plus, Minus } from '@components/icon'
import usePrice from '@lib/bigcommerce/use-price' import usePrice from '@lib/bigcommerce/use-price'
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
import { ChangeEvent, useEffect, useState } from 'react'
import s from './CartItem.module.css' import s from './CartItem.module.css'
const CartItem = ({ const CartItem = ({
@ -56,7 +57,13 @@ const CartItem = ({
return ( return (
<li className="flex flex-row space-x-8 py-6"> <li className="flex flex-row space-x-8 py-6">
<div className="w-12 h-12 bg-violet relative overflow-hidden"> <div className="w-12 h-12 bg-violet relative overflow-hidden">
<img className={s.productImage} src={item.image_url} /> <Image
src={item.image_url}
width={60}
height={60}
// The cart item image is already optimized and very small in size
unoptimized
/>
</div> </div>
<div className="flex-1 flex flex-col justify-between text-base"> <div className="flex-1 flex flex-col justify-between text-base">
<span className="font-bold mb-3">{item.name}</span> <span className="font-bold mb-3">{item.name}</span>

View File

@ -0,0 +1,3 @@
.root {
@apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
}

View File

@ -1,6 +1,8 @@
import cn from 'classnames' import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import s from './Featurebar.module.css'
interface Props { interface Props {
className?: string className?: string
title: string title: string
@ -17,8 +19,10 @@ const Featurebar: FC<Props> = ({
hide, hide,
}) => { }) => {
const rootClassName = cn( const rootClassName = cn(
'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', s.root,
{ 'translate-y-full': hide }, {
'transition-transform transform duration-500 ease-out translate-y-full': hide,
},
className className
) )
return ( return (

View File

@ -1,11 +1,11 @@
import { FC } from 'react' import { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import getSlug from '@utils/get-slug' import getSlug from '@utils/get-slug'
import { Github } from '@components/icon'
import { Logo, Container } from '@components/ui' import { Logo, Container } from '@components/ui'
import { Github, DoubleChevron } from '@components/icon' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { I18nWidget } from '@components/core'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
@ -82,13 +82,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
<div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary"> <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
<div className="flex space-x-6 items-center h-10"> <div className="flex space-x-6 items-center h-10">
<Github /> <Github />
<div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center"> <I18nWidget />
<img className="" src="/flag-us.png" />
<span>English</span>
<span className="">
<DoubleChevron />
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,23 @@
.root {
@apply relative;
}
.button {
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
}
.dropdownMenu {
@apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg {
@apply absolute border border-accents-1 shadow-lg w-56 h-auto;
}
}
.item {
@apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
text-transform: capitalize;
}
.item.active {
}

View File

@ -0,0 +1,38 @@
import { FC } from 'react'
import s from './I18nWidget.module.css'
import { Menu } from '@headlessui/react'
import { DoubleChevron } from '@components/icon'
import cn from 'classnames'
const I18nWidget: FC = () => {
return (
<nav className={s.root}>
<Menu>
<Menu.Button className={s.button}>
<img className="" src="/flag-us.png" />
<span>English</span>
<span className="">
<DoubleChevron />
</span>
</Menu.Button>
<Menu.Items className={s.dropdownMenu}>
<Menu.Item>
{({ active }) => (
<a
className={cn(s.item, { [s.active]: active })}
href="#"
onClick={(e) => {
e.preventDefault()
}}
>
Español
</a>
)}
</Menu.Item>
</Menu.Items>
</Menu>
</nav>
)
}
export default I18nWidget

View File

@ -0,0 +1 @@
export { default } from './I18nWidget'

View File

@ -8,3 +8,4 @@ export { default as UserNav } from './UserNav'
export { default as Toggle } from './Toggle' export { default as Toggle } from './Toggle'
export { default as Head } from './Head' export { default as Head } from './Head'
export { default as HTMLContent } from './HTMLContent' export { default as HTMLContent } from './HTMLContent'
export { default as I18nWidget } from './I18nWidget'

View File

@ -11,9 +11,9 @@ const DoubleChevron = ({ ...props }) => {
<path <path
d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952" d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -5,11 +5,11 @@ const Moon = ({ ...props }) => {
width="24" width="24"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
fill="none" fill="none"
shape-rendering="geometricPrecision" shapeRendering="geometricPrecision"
{...props} {...props}
> >
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /> <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />

View File

@ -11,16 +11,16 @@ const RightArrow = ({ ...props }) => {
<path <path
d="M5 12H19" d="M5 12H19"
stroke="white" stroke="white"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M12 5L19 12L12 19" d="M12 5L19 12L12 19"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )

View File

@ -5,11 +5,11 @@ const Sun = ({ ...props }) => {
width="24" width="24"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" strokeWidth="1.5"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
fill="none" fill="none"
shape-rendering="geometricPrecision" shapeRendering="geometricPrecision"
{...props} {...props}
> >
<circle cx="12" cy="12" r="5" /> <circle cx="12" cy="12" r="5" />

View File

@ -86,9 +86,11 @@
} }
& .productTitle { & .productTitle {
width: 18vw;
margin-top: -7px; margin-top: -7px;
font-size: 1rem; font-size: 1rem;
& span {
line-height: 3;
}
} }
& .productPrice { & .productPrice {
@ -97,13 +99,12 @@
} }
.productTitle { .productTitle {
@apply pt-4 leading-8; @apply pt-2 max-w-full w-full;
width: 400px;
font-size: 2rem; font-size: 2rem;
letter-spacing: 0.4px; letter-spacing: 0.4px;
& span { & span {
@apply inline p-4 bg-primary text-primary font-bold; @apply py-4 px-6 bg-primary text-primary font-bold;
font-size: inherit; font-size: inherit;
letter-spacing: inherit; letter-spacing: inherit;
box-decoration-break: clone; box-decoration-break: clone;
@ -112,10 +113,22 @@
} }
.productPrice { .productPrice {
@apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6; @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
letter-spacing: 0.4px; letter-spacing: 0.4px;
} }
.wishlistButton { .wishlistButton {
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
} }
.imageContainer {
@apply absolute z-10 inset-0 flex items-center justify-center;
& > div {
@apply h-full;
& > div {
@apply h-full;
padding-bottom: 0 !important;
}
}
}

View File

@ -1,30 +1,46 @@
import cn from 'classnames'
import s from './ProductCard.module.css'
import { FC, ReactNode, Component } from 'react' import { FC, ReactNode, Component } from 'react'
import cn from 'classnames'
import Image from 'next/image'
import Link from 'next/link'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import { Heart } from '@components/icon' import { Heart } from '@components/icon'
import Link from 'next/link' import s from './ProductCard.module.css'
interface Props { interface Props {
className?: string className?: string
children?: ReactNode[] | Component[] | any[] children?: ReactNode[] | Component[] | any[]
product: ProductNode product: ProductNode
variant?: 'slim' | 'simple' variant?: 'slim' | 'simple'
imgWidth: number
imgHeight: number
priority?: boolean
} }
const ProductCard: FC<Props> = ({ className, product: p, variant }) => { const ProductCard: FC<Props> = ({
className,
product: p,
variant,
imgWidth,
imgHeight,
priority,
}) => {
const src = p.images.edges?.[0]?.node.urlOriginal!
if (variant === 'slim') { if (variant === 'slim') {
return ( return (
<div className="relative overflow-hidden box-border"> <div className="relative overflow-hidden box-border">
<img <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
className="object-scale-down h-48"
src={p.images.edges?.[0]?.node.urlSmall}
/>
<div className="absolute inset-0 flex items-center justify-end mr-8">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words"> <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.name} {p.name}
</span> </span>
</div> </div>
<Image
src={src}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div> </div>
) )
} }
@ -34,15 +50,9 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
<a <a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)} className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
> >
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className={cn('w-full object-cover', s['product-image'])}
src={p.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className={s.squareBg} /> <div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative"> <div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0"> <div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}> <h3 className={s.productTitle}>
<span>{p.name}</span> <span>{p.name}</span>
</h3> </h3>
@ -52,6 +62,16 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
<Heart /> <Heart />
</div> </div>
</div> </div>
<div className={cn(s.imageContainer)}>
<Image
className={cn('w-full object-cover', s['product-image'])}
src={src}
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
</a> </a>
</Link> </Link>
) )

View File

@ -28,6 +28,7 @@
.positionIndicatorsContainer { .positionIndicatorsContainer {
@apply hidden; @apply hidden;
@screen sm { @screen sm {
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform; @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
} }
@ -35,14 +36,6 @@
.positionIndicator { .positionIndicator {
@apply rounded-full p-2; @apply rounded-full p-2;
/* :hover .dot {
@apply bg-hover-2;
}
:focus .dot {
@apply outline-none;
} */
} }
.dot { .dot {

View File

@ -1,5 +1,4 @@
import { useKeenSlider } from 'keen-slider/react' import { useKeenSlider } from 'keen-slider/react'
import Image from 'next/image'
import React, { Children, FC, isValidElement, useState } from 'react' import React, { Children, FC, isValidElement, useState } from 'react'
import cn from 'classnames' import cn from 'classnames'

View File

@ -8,15 +8,15 @@
.productDisplay { .productDisplay {
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet; @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
margin-right: -2rem; min-height: 600px;
margin-left: -2rem;
min-height: 400px;
@screen md { @screen md {
min-height: 700px; min-height: 700px;
} }
@screen lg { @screen lg {
margin-right: -2rem;
margin-left: -2rem;
@apply mx-0 col-span-6; @apply mx-0 col-span-6;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
@ -28,7 +28,11 @@
} }
.nameBox { .nameBox {
@apply absolute top-6 left-6 z-20; @apply absolute top-6 left-0 z-20 pr-16;
@screen lg {
@apply left-6 pr-16;
}
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold; @apply px-6 py-2 bg-primary text-primary font-bold;
@ -43,16 +47,16 @@
@screen lg { @screen lg {
& .name, & .name,
& .price { & .price {
@apply bg-hover-1 text-white; @apply bg-violet-light text-white;
} }
} }
} }
.sidebar { .sidebar {
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full; @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
@screen lg { @screen lg {
@apply col-span-5 pl-12 pt-20; @apply col-span-6 pt-20;
} }
} }
@ -60,6 +64,15 @@
@apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden; @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
} }
.imageContainer {
& > div {
@apply h-full;
& > div {
@apply h-full;
}
}
}
.img { .img {
@apply w-full h-auto max-h-full object-cover; @apply w-full h-auto max-h-full object-cover;
} }

View File

@ -1,14 +1,17 @@
import cn from 'classnames'
import { NextSeo } from 'next-seo'
import s from './ProductView.module.css'
import { FC, useState } from 'react' import { FC, useState } from 'react'
import cn from 'classnames'
import Image from 'next/image'
import { NextSeo } from 'next-seo'
import s from './ProductView.module.css'
import { Heart } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui' import { Button, Container } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product' import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item' import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers' import { getProductOptions } from '../helpers'
import { Heart } from '@components/icon'
interface Props { interface Props {
className?: string className?: string
@ -52,7 +55,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
description: product.description, description: product.description,
images: [ images: [
{ {
url: product.images.edges?.[0]?.node.urlXL || '', url: product.images.edges?.[0]?.node.urlOriginal!,
width: 800, width: 800,
height: 600, height: 600,
alt: product.name, alt: product.name,
@ -73,14 +76,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
<div className={s.sliderContainer}> <div className={s.sliderContainer}>
<ProductSlider> <ProductSlider>
{/** TODO: Change with Image Component **/}
{product.images.edges?.map((image, i) => ( {product.images.edges?.map((image, i) => (
<img <div key={image?.node.urlXL} className={s.imageContainer}>
key={image?.node.urlSmall} <Image
className={s.img} className={s.img}
src={image?.node.urlXL} src={image?.node.urlXL!}
loading={i === 0 ? 'eager' : 'lazy'} width={1050}
/> height={1050}
priority={i === 0}
quality="90"
/>
</div>
))} ))}
</ProductSlider> </ProductSlider>
</div> </div>
@ -92,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
<div className="pb-4" key={opt.displayName}> <div className="pb-4" key={opt.displayName}>
<h2 className="uppercase font-medium">{opt.displayName}</h2> <h2 className="uppercase font-medium">{opt.displayName}</h2>
<div className="flex flex-row py-4"> <div className="flex flex-row py-4">
{opt.values.map((v: any) => { {opt.values.map((v: any, i: number) => {
const active = choices[opt.displayName] const active = choices[opt.displayName]
return ( return (
<Swatch <Swatch
key={v.entityId} key={`${v.entityId}-${i}`}
active={v.label === active} active={v.label === active}
variant={opt.displayName} variant={opt.displayName}
color={v.hexColors ? v.hexColors[0] : ''} color={v.hexColors ? v.hexColors[0] : ''}

View File

@ -9,7 +9,9 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div', clean }) => { const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean }) const rootClassName = cn(className, {
'mx-auto max-w-8xl px-6': !clean,
})
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

View File

@ -0,0 +1,6 @@
.root {
@apply mx-auto grid grid-cols-1 py-32 gap-4;
@screen md {
@apply grid-cols-2;
}
}

View File

@ -1,6 +1,8 @@
import React, { FC } from 'react' import React, { FC } from 'react'
import { Container } from '@components/ui' import { Container } from '@components/ui'
import { RightArrow } from '@components/icon' import { RightArrow } from '@components/icon'
import s from './Hero.module.css'
interface Props { interface Props {
className?: string className?: string
headline: string headline: string
@ -9,20 +11,24 @@ interface Props {
const Hero: FC<Props> = ({ headline, description }) => { const Hero: FC<Props> = ({ headline, description }) => {
return ( return (
<Container> <div className="bg-black">
<div className="mx-auto grid grid-cols-2 bg-black py-32"> <Container>
<h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl"> <div className={s.root}>
{headline} <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
</h2> {headline}
<div className="flex flex-col justify-between"> </h2>
<p className="mt-5 text-xl leading-7 text-accent-2">{description}</p> <div className="flex flex-col justify-between">
<a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer"> <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
<span>Read it here</span> {description}
<RightArrow width="20" heigh="20" className="ml-1" /> </p>
</a> <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
<span>Read it here</span>
<RightArrow width="20" heigh="20" className="ml-1" />
</a>
</div>
</div> </div>
</div> </Container>
</Container> </div>
) )
} }

View File

@ -49,7 +49,7 @@ export function extendHook(
['brandId', input.brandId], ['brandId', input.brandId],
['sort', input.sort], ['sort', input.sort],
], ],
customFetcher, customFetcher as any,
{ revalidateOnFocus: false, ...swrOptions } { revalidateOnFocus: false, ...swrOptions }
) )

View File

@ -1,4 +1,8 @@
module.exports = { module.exports = {
images: {
sizes: [320, 480, 820, 1200, 1600],
domains: ['cdn11.bigcommerce.com'],
},
rewrites() { rewrites() {
return [ return [
{ {

View File

@ -31,7 +31,7 @@
"keen-slider": "^5.2.4", "keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"next": "^9.5.6-canary.9", "next": "^9.5.6-canary.12",
"next-seo": "^4.11.0", "next-seo": "^4.11.0",
"next-themes": "^0.0.4", "next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6", "nextjs-progressbar": "^0.0.6",

View File

@ -65,13 +65,26 @@ export default function Home({
return ( return (
<div> <div>
<Grid> <Grid>
{featured.slice(0, 3).map(({ node }) => ( {featured.slice(0, 3).map(({ node }, i) => (
<ProductCard key={node.path} product={node} /> <ProductCard
key={node.path}
product={node}
// The first image is the largest one in the grid
imgWidth={i === 0 ? 1600 : 820}
imgHeight={i === 0 ? 1600 : 820}
priority
/>
))} ))}
</Grid> </Grid>
<Marquee variant="secondary"> <Marquee variant="secondary">
{bestSelling.slice(3, 6).map(({ node }) => ( {bestSelling.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" /> <ProductCard
key={node.path}
product={node}
variant="slim"
imgWidth={320}
imgHeight={320}
/>
))} ))}
</Marquee> </Marquee>
<Hero <Hero
@ -85,16 +98,28 @@ export default function Home({
Natural." Natural."
/> />
<Grid layout="B"> <Grid layout="B">
{featured.slice(3, 6).map(({ node }) => ( {featured.slice(3, 6).map(({ node }, i) => (
<ProductCard key={node.path} product={node} /> <ProductCard
key={node.path}
product={node}
// The second image is the largest one in the grid
imgWidth={i === 1 ? 1600 : 820}
imgHeight={i === 1 ? 1600 : 820}
/>
))} ))}
</Grid> </Grid>
<Marquee> <Marquee>
{bestSelling.slice(3, 6).map(({ node }) => ( {bestSelling.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" /> <ProductCard
key={node.path}
product={node}
variant="slim"
imgWidth={320}
imgHeight={320}
/>
))} ))}
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-row w-full px-6">
<div className="pr-3 w-48 relative"> <div className="pr-3 w-48 relative">
<div className="sticky top-32"> <div className="sticky top-32">
<ul className="mb-10"> <ul className="mb-10">
@ -122,7 +147,13 @@ export default function Home({
<div className="flex-1"> <div className="flex-1">
<Grid layout="normal"> <Grid layout="normal">
{newestProducts.map(({ node }) => ( {newestProducts.map(({ node }) => (
<ProductCard key={node.path} product={node} variant="simple" /> <ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))} ))}
</Grid> </Grid>
</div> </div>

View File

@ -147,6 +147,8 @@ export default function Search({
key={node.path} key={node.path}
className="animate__animated animate__fadeIn" className="animate__animated animate__fadeIn"
product={node} product={node}
imgWidth={480}
imgHeight={480}
/> />
))} ))}
</Grid> </Grid>

1024
yarn.lock

File diff suppressed because it is too large Load Diff