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

amending gallery styling

Browse Source
This commit is contained in:
Samantha Kellow 2023-11-23 16:35:31 +00:00
parent 3d1aa2f922
commit 175b5e8589
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/grid/tile.tsx
View File

@ -31,7 +31,7 @@ export function GridTileImage({
{props.src ? ( {props.src ? (
// eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
<Image <Image
className={clsx('relative h-full w-full object-contain', { className={clsx('relative h-full w-full object-cover', {
'transition duration-300 ease-in-out hover:scale-105': isInteractive 'transition duration-300 ease-in-out hover:scale-105': isInteractive
})} })}
{...props} {...props}

12
components/product/gallery.tsx
View File

@ -24,7 +24,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden"> <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
{images[currentImageIndex] && ( {images[currentImageIndex] && (
<Image <Image
className="relative h-full w-full object-contain" className="relative h-full w-full object-cover"
height={600} height={600}
width={600} width={600}
alt={images[currentImageIndex]?.altText as string} alt={images[currentImageIndex]?.altText as string}
@ -34,8 +34,8 @@ 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-2 flex w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80"> <div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<button <button
aria-label="Previous product image" aria-label="Previous product image"
onClick={() => handleNavigate('previous')} onClick={() => handleNavigate('previous')}
@ -64,14 +64,14 @@ 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-auto w-20" className="h-20 w-20"
onClick={() => setCurrentImageIndex(index)} onClick={() => setCurrentImageIndex(index)}
> >
<GridTileImage <GridTileImage
alt={image.altText} alt={image.altText}
src={image.src} src={image.src}
width={600} width={50}
height={600} height={50}
active={isActive} active={isActive}
/> />
</button> </button>