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

wip: Saving work

Browse Source
This commit is contained in:
Sol Irvine
2023-08-20 09:55:09 +09:00
parent 097cb83568
commit 6de73e3ff2
13 changed files with 172 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/product/gallery.tsx
View File

@@ -28,7 +28,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
return (
<>
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
<div className="relative aspect-square h-full w-full overflow-hidden">
{images[imageIndex] && (
<Image
className="h-full w-full object-cover"

16
components/product/product-description.tsx
View File

@@ -1,31 +1,15 @@
import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b border-white/20 pb-6">
<h1 className="font-multilingual mb-2 text-5xl">{product.title}</h1>
<div className="font-multilingual mr-auto w-auto text-lg text-white">
<Price
amount={product.priceRange.maxVariantPrice.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
/>
</div>
</div>
<VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? (
<Prose
className="mb-6 text-lg leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
</>
);
}

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

@@ -89,12 +89,12 @@ export function VariantSelector({
href={optionUrl}
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',
'flex min-w-[48px] items-center justify-center rounded-full border bg-white px-2 py-1 text-sm text-black',
{
'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 ':
'cursor-default ring-2 hover:ring-dark/50': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-dark/30 ':
!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-white text-black ring-1 ring-white before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform':
!isAvailableForSale
}
)}