crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 06:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

rebase

Browse Source
This commit is contained in:
StephDietz 2023-07-11 15:43:13 -05:00
parent 187ca174b9
commit 5516124f89
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/carousel.tsx
View File

@ -10,8 +10,8 @@ export async function Carousel() {
if (!products?.length) return null; if (!products?.length) return null;
return ( return (
<div className="relative w-full overflow-hidden pb-6"> <div className="relative w-full pb-6 overflow-hidden">
<div className="flex animate-carousel space-x-6"> <div className="flex space-x-6 animate-carousel">
{[...products, ...products].map((product, i) => ( {[...products, ...products].map((product, i) => (
<Link <Link
key={`${product.handle}${i}`} key={`${product.handle}${i}`}
@ -21,7 +21,7 @@ export async function Carousel() {
{product.featuredImage ? ( {product.featuredImage ? (
<Image <Image
alt={product.title} alt={product.title}
className="h-full object-contain" className="object-contain h-full"
fill fill
sizes="33vw" sizes="33vw"
src={product.featuredImage.url} src={product.featuredImage.url}

8
components/product/gallery.tsx
View File

@ -24,7 +24,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
<div className="relative h-full max-h-[600px] overflow-hidden"> <div className="relative h-full max-h-[600px] overflow-hidden">
{images[currentImage] && ( {images[currentImage] && (
<Image <Image
className="relative h-full w-full object-contain" className="relative object-contain w-full h-full"
height={600} height={600}
width={600} width={600}
alt={images[currentImage]?.altText as string} alt={images[currentImage]?.altText as string}
@ -34,14 +34,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? ( {images.length > 1 ? (
<div className="absolute bottom-[15%] flex w-full justify-center"> <div className="absolute bottom-[15%] flex w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 px-6 text-gray-500 backdrop-blur"> <div className="flex items-center px-6 mx-auto text-gray-500 border border-white rounded-full h-11 bg-light/80 backdrop-blur">
<button <button
aria-label="Previous product image" aria-label="Previous product image"
onClick={() => handleNavigate('previous')} onClick={() => handleNavigate('previous')}
> >
<ArrowLeftIcon className="h-5" /> <ArrowLeftIcon className="h-5" />
</button> </button>
<div className="mx-6 h-6 w-px bg-gray-400"></div> <div className="w-px h-6 mx-6 bg-gray-400"></div>
<button aria-label="Next product image" onClick={() => handleNavigate('next')}> <button aria-label="Next product image" onClick={() => handleNavigate('next')}>
<ArrowRightIcon className="h-5" /> <ArrowRightIcon className="h-5" />
</button> </button>
@ -72,7 +72,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
<button <button
aria-label="Enlarge product image" aria-label="Enlarge product image"
key={image.src} key={image.src}
className="h-full w-1/4" className="w-1/4 h-full"
onClick={() => setCurrentImage(index)} onClick={() => setCurrentImage(index)}
> >
<GridTileImage <GridTileImage