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

use actions

Browse Source
This commit is contained in:
Lee Robinson 2024-07-28 18:24:16 -05:00
parent f321a69bbf
commit 16b222a22e
2 changed files with 51 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/product/gallery.tsx
View File

@ -16,7 +16,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
return (
<>
<form>
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
{images[imageIndex] && (
<Image
@ -33,16 +33,16 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
<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-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<button
formAction={() => updateImage(previousImageIndex.toString())}
aria-label="Previous product image"
onClick={() => updateImage(previousImageIndex.toString())}
className={buttonClassName}
>
<ArrowLeftIcon className="h-5" />
</button>
<div className="mx-1 h-6 w-px bg-neutral-500"></div>
<button
formAction={() => updateImage(nextImageIndex.toString())}
aria-label="Next product image"
onClick={() => updateImage(nextImageIndex.toString())}
className={buttonClassName}
>
<ArrowRightIcon className="h-5" />
@ -60,9 +60,9 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
return (
<li key={image.src} className="h-20 w-20">
<button
formAction={() => updateImage(index.toString())}
aria-label="Select product image"
className="h-full w-full"
onClick={() => updateImage(index.toString())}
>
<GridTileImage
alt={image.altText}
@ -77,6 +77,6 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
})}
</ul>
) : null}
</>
</form>
);
}

8
components/product/variant-selector.tsx
View File

@ -35,7 +35,8 @@ export function VariantSelector({
}));
return options.map((option) => (
<dl className="mb-8" key={option.id}>
<form key={option.id}>
<dl className="mb-8">
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
<dd className="flex flex-wrap gap-3">
{option.values.map((value) => {
@ -61,16 +62,16 @@ export function VariantSelector({
return (
<button
formAction={() => updateOption(optionNameLowerCase, value)}
key={value}
aria-disabled={!isAvailableForSale}
disabled={!isAvailableForSale}
onClick={() => updateOption(optionNameLowerCase, value)}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx(
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
{
'cursor-default ring-2 ring-blue-600': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600':
'ring-1 ring-transparent transition duration-300 ease-in-out hover:ring-blue-600':
!isActive && isAvailableForSale,
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
!isAvailableForSale
@ -83,5 +84,6 @@ export function VariantSelector({
})}
</dd>
</dl>
</form>
));
}