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

update UI for product description

Browse Source
This commit is contained in:
StephDietz
2023-07-11 09:34:38 -05:00
parent 25c91dc590
commit b2a3011ef1
4 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/product/gallery.tsx
View File

@@ -51,7 +51,7 @@ export function Gallery({
)}
{images.length > 1 ? (
<div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
<div className="absolute flex flex-row h-12 text-white border border-white shadow-xl bottom-10 right-10 dark:border-black dark:text-black">
<button
aria-label="Previous product image"
className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
@@ -78,7 +78,7 @@ export function Gallery({
<button
aria-label="Enlarge product image"
key={image.src}
className="h-full w-1/4"
className="w-1/4 h-full"
onClick={() => setCurrentImage(index)}
>
<GridTileImage

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

@@ -85,7 +85,7 @@ export function VariantSelector({
return options.map((option) => (
<dl className="mb-8" key={option.id}>
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
<dt className="mb-4 text-sm tracking-wide uppercase">{option.name}</dt>
<dd className="flex flex-wrap gap-3">
{option.values.map((value) => {
// Base option params on selected variant params.
@@ -114,10 +114,10 @@ export function VariantSelector({
href={optionUrl}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx(
'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
'flex min-w-[48px] items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-sm dark:border-gray-900 dark:bg-gray-900',
{
'cursor-default ring-2 ring-black dark:ring-white': isActive,
'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
'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 ':
!isActive && isAvailableForSale,
'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
!isAvailableForSale