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: Product detail view

Browse Source
This commit is contained in:
Sol Irvine
2023-08-19 17:18:45 +09:00
parent 523db4e1d4
commit 097cb83568
14 changed files with 92 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/product/gallery.tsx
View File

@@ -24,14 +24,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
const previousUrl = createUrl(pathname, previousSearchParams);
const buttonClassName =
'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-white flex items-center justify-center';
return (
<>
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
{images[imageIndex] && (
<Image
className="h-full w-full object-contain"
className="h-full w-full object-cover"
fill
sizes="(min-width: 1024px) 66vw, 100vw"
alt={images[imageIndex]?.altText as string}
@@ -41,8 +41,8 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
)}
{images.length > 1 ? (
<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="absolute bottom-[8%] flex w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white/40 bg-dark/40 text-white/70 backdrop-blur">
<Link
aria-label="Previous product image"
href={previousUrl}
@@ -51,7 +51,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
>
<ArrowLeftIcon className="h-5" />
</Link>
<div className="mx-1 h-6 w-px bg-neutral-500"></div>
<div className="mx-1 h-6 w-px bg-white/40"></div>
<Link
aria-label="Next product image"
href={nextUrl}
@@ -74,18 +74,19 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
imageSearchParams.set('image', index.toString());
return (
<li key={image.src} className="h-auto w-20">
<li key={image.src} className="aspect-square h-auto w-20">
<Link
aria-label="Enlarge product image"
href={createUrl(pathname, imageSearchParams)}
scroll={false}
className="h-full w-full"
className="relative block h-full w-full"
>
<GridTileImage
alt={image.altText}
src={image.src}
width={80}
height={80}
fill
// width={80}
// height={80}
active={isActive}
/>
</Link>

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

@@ -7,9 +7,9 @@ import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
<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}
@@ -20,7 +20,7 @@ export function ProductDescription({ product }: { product: Product }) {
{product.descriptionHtml ? (
<Prose
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
className="mb-6 text-lg leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
) : null}