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'; '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 ( return (
<> <form>
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden"> <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
{images[imageIndex] && ( {images[imageIndex] && (
<Image <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="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"> <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 <button
formAction={() => updateImage(previousImageIndex.toString())}
aria-label="Previous product image" aria-label="Previous product image"
onClick={() => updateImage(previousImageIndex.toString())}
className={buttonClassName} className={buttonClassName}
> >
<ArrowLeftIcon className="h-5" /> <ArrowLeftIcon className="h-5" />
</button> </button>
<div className="mx-1 h-6 w-px bg-neutral-500"></div> <div className="mx-1 h-6 w-px bg-neutral-500"></div>
<button <button
formAction={() => updateImage(nextImageIndex.toString())}
aria-label="Next product image" aria-label="Next product image"
onClick={() => updateImage(nextImageIndex.toString())}
className={buttonClassName} className={buttonClassName}
> >
<ArrowRightIcon className="h-5" /> <ArrowRightIcon className="h-5" />
@ -60,9 +60,9 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
return ( return (
<li key={image.src} className="h-20 w-20"> <li key={image.src} className="h-20 w-20">
<button <button
formAction={() => updateImage(index.toString())}
aria-label="Select product image" aria-label="Select product image"
className="h-full w-full" className="h-full w-full"
onClick={() => updateImage(index.toString())}
> >
<GridTileImage <GridTileImage
alt={image.altText} alt={image.altText}
@ -77,6 +77,6 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
})} })}
</ul> </ul>
) : null} ) : null}
</> </form>
); );
} }

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

@ -35,53 +35,55 @@ export function VariantSelector({
})); }));
return options.map((option) => ( return options.map((option) => (
<dl className="mb-8" key={option.id}> <form key={option.id}>
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt> <dl className="mb-8">
<dd className="flex flex-wrap gap-3"> <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
{option.values.map((value) => { <dd className="flex flex-wrap gap-3">
const optionNameLowerCase = option.name.toLowerCase(); {option.values.map((value) => {
const optionNameLowerCase = option.name.toLowerCase();
// Base option params on current selectedOptions so we can preserve any other param state. // Base option params on current selectedOptions so we can preserve any other param state.
const optionParams = { ...state, [optionNameLowerCase]: value }; const optionParams = { ...state, [optionNameLowerCase]: value };
// Filter out invalid options and check if the option combination is available for sale. // Filter out invalid options and check if the option combination is available for sale.
const filtered = Object.entries(optionParams).filter(([key, value]) => const filtered = Object.entries(optionParams).filter(([key, value]) =>
options.find( options.find(
(option) => option.name.toLowerCase() === key && option.values.includes(value) (option) => option.name.toLowerCase() === key && option.values.includes(value)
) )
); );
const isAvailableForSale = combinations.find((combination) => const isAvailableForSale = combinations.find((combination) =>
filtered.every( filtered.every(
([key, value]) => combination[key] === value && combination.availableForSale ([key, value]) => combination[key] === value && combination.availableForSale
) )
); );
// The option is active if it's in the selected options. // The option is active if it's in the selected options.
const isActive = state[optionNameLowerCase] === value; const isActive = state[optionNameLowerCase] === value;
return ( return (
<button <button
key={value} formAction={() => updateOption(optionNameLowerCase, value)}
aria-disabled={!isAvailableForSale} key={value}
disabled={!isAvailableForSale} aria-disabled={!isAvailableForSale}
onClick={() => updateOption(optionNameLowerCase, value)} disabled={!isAvailableForSale}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`} title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx( 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', '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, '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, !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': '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 !isAvailableForSale
} }
)} )}
> >
{value} {value}
</button> </button>
); );
})} })}
</dd> </dd>
</dl> </dl>
</form>
)); ));
} }