@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/price-range-filter.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { Slider } from '@/components/ui/slider';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface PriceRangeFilterProps {
+    min: number;
+    max: number;
+}
+
+function centsToDollars(cents: number): string {
+    return (cents / 100).toFixed(0);
+}
+
+function parseParam(value: string | null): number | null {
+    return value != null ? Number(value) : null;
+}
+
+export function PriceRangeFilter({ min, max }: PriceRangeFilterProps) {
+    const t = useTranslations('Filters');
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+
+    const urlMin = parseParam(searchParams.get('priceMin')) ?? min;
+    const urlMax = parseParam(searchParams.get('priceMax')) ?? max;
+
+    const [localRange, setLocalRange] = useState<[number, number]>([urlMin, urlMax]);
+
+    useEffect(() => {
+        setLocalRange([urlMin, urlMax]);
+    }, [urlMin, urlMax]);
+
+    const applyRange = useCallback(
+        (newMin: number, newMax: number) => {
+            const params = new URLSearchParams(searchParams);
+            if (newMin <= min && newMax >= max) {
+                params.delete('priceMin');
+                params.delete('priceMax');
+            } else {
+                params.set('priceMin', String(newMin));
+                params.set('priceMax', String(newMax));
+            }
+            params.delete('page');
+            router.push(`${pathname}?${params.toString()}`);
+        },
+        [searchParams, pathname, router, min, max],
+    );
+
+    const handleSliderChange = (values: number[]) => {
+        setLocalRange([values[0], values[1]]);
+    };
+
+    const handleSliderCommit = (values: number[]) => {
+        applyRange(values[0], values[1]);
+    };
+
+    const handleMinBlur = () => {
+        const clamped = Math.max(min, Math.min(localRange[0], localRange[1]));
+        setLocalRange([clamped, localRange[1]]);
+        applyRange(clamped, localRange[1]);
+    };
+
+    const handleMaxBlur = () => {
+        const clamped = Math.min(max, Math.max(localRange[1], localRange[0]));
+        setLocalRange([localRange[0], clamped]);
+        applyRange(localRange[0], clamped);
+    };
+
+    return (
+        <div className="py-3 space-y-3">
+            <Label className="text-sm font-medium">{t('priceRange')}</Label>
+            <Slider
+                min={min}
+                max={max}
+                step={100}
+                value={localRange}
+                onValueChange={handleSliderChange}
+                onValueCommit={handleSliderCommit}
+            />
+            <div className="flex items-center gap-2">
+                <div className="flex-1">
+                    <Input
+                        type="number"
+                        value={centsToDollars(localRange[0])}
+                        onChange={(e) => setLocalRange([Number(e.target.value) * 100, localRange[1]])}
+                        onBlur={handleMinBlur}
+                        className="h-8 text-xs"
+                        aria-label={t('minPrice')}
+                    />
+                </div>
+                <span className="text-xs text-muted-foreground">–</span>
+                <div className="flex-1">
+                    <Input
+                        type="number"
+                        value={centsToDollars(localRange[1])}
+                        onChange={(e) => setLocalRange([localRange[0], Number(e.target.value) * 100])}
+                        onBlur={handleMaxBlur}
+                        className="h-8 text-xs"
+                        aria-label={t('maxPrice')}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/price-tiers.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import {ResultOf} from '@/graphql';
+import {GetProductDetailQuery} from '@/lib/vendure/queries';
+import {Price} from '@/components/commerce/price';
+import {useTranslations} from 'next-intl';
+
+type ProductVariant = NonNullable<ResultOf<typeof GetProductDetailQuery>['product']>['variants'][number];
+export type PriceTier = NonNullable<ProductVariant['priceTiers']>[number];
+
+interface PriceTiersProps {
+    tiers: PriceTier[];
+    basePrice: number;
+    quantity?: number;
+    onTierClick?: (minQuantity: number) => void;
+    /** Conversion factor of the selected packaging unit — used to compute effective base-unit quantity */
+    conversionFactor?: number;
+    /** Label for the packaging unit (e.g., "Box") — shown alongside per-piece price */
+    unitName?: string;
+    currencyCode?: string;
+}
+
+export function PriceTiers({tiers, basePrice, quantity = 1, onTierClick, conversionFactor = 1, unitName, currencyCode}: PriceTiersProps) {
+    const t = useTranslations('Product');
+    const sorted = [...tiers]
+        .filter(t => t.minQuantity != null)
+        .sort((a, b) => a.minQuantity! - b.minQuantity!);
+
+    if (sorted.length < 2) {
+        return null;
+    }
+
+    // Effective base-unit quantity: 2 boxes × 50 = 100 pieces
+    const effectiveQuantity = quantity * conversionFactor;
+    const hasPackagingUnit = conversionFactor > 1 && unitName;
+
+    // Find the active tier based on effective base-unit quantity
+    const activeTierIndex = sorted.reduce((activeIdx, tier, idx) =>
+        effectiveQuantity >= tier.minQuantity! ? idx : activeIdx
+    , -1);
+
+    return (
+        <div className="rounded-lg border bg-muted/30 p-4">
+            <h3 className="text-sm font-semibold mb-3">{t('volumePricing')} <span className="text-[10px] font-normal text-muted-foreground">{t('volumePricingExclTax')}</span></h3>
+            <div className="space-y-1">
+                {sorted.map((tier, idx) => {
+                    const savings = tier.price < basePrice
+                        ? Math.round((1 - tier.price / basePrice) * 100)
+                        : 0;
+                    const isActive = idx === activeTierIndex;
+                    const isClickable = !!onTierClick && !hasPackagingUnit;
+                    const packagePrice = hasPackagingUnit ? Math.round(tier.price * conversionFactor) : null;
+
+                    return (
+                        <button
+                            key={tier.minQuantity}
+                            type="button"
+                            disabled={!isClickable}
+                            onClick={() => isClickable && onTierClick?.(tier.minQuantity!)}
+                            className={`w-full flex items-center justify-between text-sm px-3 py-2 rounded-md transition-colors ${
+                                isActive
+                                    ? 'bg-primary/15 ring-1 ring-primary/30 font-medium'
+                                    : isClickable
+                                        ? 'hover:bg-muted cursor-pointer'
+                                        : ''
+                            } ${!isClickable ? 'cursor-default' : ''}`}
+                            aria-label={`${t('unitsPlus', {qty: tier.minQuantity!})} at ${(tier.price / 100).toFixed(2)} ${t('eachUnit')}${isActive ? ' (current tier)' : ''}`}
+                            aria-current={isActive ? 'true' : undefined}
+                        >
+                            <span className={isActive ? 'text-primary' : 'text-muted-foreground'}>
+                                {t('unitsPlus', {qty: tier.minQuantity!})}
+                            </span>
+                            <div className="flex items-center gap-2">
+                                {savings > 0 && (
+                                    <span className="text-xs text-green-600 font-medium">
+                                        {t('savePercent', {percent: savings})}
+                                    </span>
+                                )}
+                                {packagePrice != null ? (
+                                    <span className="font-medium">
+                                        <Price value={packagePrice} currencyCode={currencyCode}/>
+                                        <span className="text-xs text-muted-foreground font-normal ml-1">
+                                            (<Price value={tier.price} currencyCode={currencyCode}/>{t('perPiece')})
+                                        </span>
+                                    </span>
+                                ) : (
+                                    <span className="font-medium">
+                                        <Price value={tier.price} currencyCode={currencyCode}/> {t('eachUnit')}
+                                    </span>
+                                )}
+                            </div>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/price.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import {useLocale, useTranslations} from 'next-intl';
+import {toIntlLocale} from '@/i18n/locale-utils';
+
+interface PriceProps {
+    value: number;
+    currencyCode?: string;
+    /** Show a tax label suffix: 'excl' for "excl. tax", 'incl' for "incl. tax" */
+    taxLabel?: 'excl' | 'incl';
+}
+
+export function Price({value, currencyCode = 'EUR', taxLabel}: PriceProps) {
+    const locale = useLocale();
+    const t = useTranslations('Price');
+    return (
+        <>
+            {new Intl.NumberFormat(toIntlLocale(locale), {
+                style: 'currency',
+                currency: currencyCode,
+            }).format(value / 100)}
+            {taxLabel && (
+                <span className="text-[10px] font-normal text-muted-foreground ml-1">
+                    {taxLabel === 'excl' ? t('exclTax') : t('inclTax')}
+                </span>
+            )}
+        </>
+    );
+}

package/dist/assets/storefront/src/components/commerce/product-card-list.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useRef } from 'react';
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import { FragmentOf, readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { Price } from '@/components/commerce/price';
+import { Badge } from '@/components/ui/badge';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { HighlightedText } from './highlighted-text';
+import { ProductListExpansion, prefetchProduct } from './product-list-expansion';
+
+interface ProductCardListProps {
+    product: FragmentOf<typeof ProductCardFragment>;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+
+export function ProductCardList({ product: productProp, isExpanded, onToggle }: ProductCardListProps) {
+    const product = readFragment(ProductCardFragment, productProp);
+    const prefetchedRef = useRef(false);
+
+    const handleMouseEnter = () => {
+        if (prefetchedRef.current) return;
+        prefetchedRef.current = true;
+        prefetchProduct(product.slug);
+    };
+
+    return (
+        <div className="bg-card rounded-lg border border-border overflow-hidden transition-colors hover:border-primary/40">
+            <div
+                role="button"
+                tabIndex={0}
+                onMouseEnter={handleMouseEnter}
+                onClick={(e) => {
+                    // Don't toggle if clicking on the product name link
+                    if ((e.target as HTMLElement).closest('[data-product-link]')) return;
+                    onToggle();
+                }}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onToggle();
+                    }
+                }}
+                className="flex items-center gap-4 p-3 cursor-pointer"
+            >
+                <div className="h-20 w-20 flex-shrink-0 relative bg-muted rounded-md overflow-hidden">
+                    {product.productAsset ? (
+                        <Image
+                            src={product.productAsset.preview}
+                            alt={product.productName}
+                            fill
+                            className="object-cover"
+                            sizes="80px"
+                        />
+                    ) : (
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">
+                            No image
+                        </div>
+                    )}
+                </div>
+                <div className="flex-1 min-w-0">
+                    <Link
+                        href={`/product/${product.slug}`}
+                        data-product-link
+                        className="font-medium text-sm truncate block hover:text-primary transition-colors"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {product.productName}
+                    </Link>
+                    {product.highlights.length > 0 && product.highlights[0].matchedTokens.length > 0 && (
+                        <HighlightedText
+                            text={product.productName}
+                            matchedTokens={product.highlights[0].matchedTokens}
+                            className="text-xs text-muted-foreground line-clamp-1 mt-0.5 red"
+                        />
+                    )}
+                    {product.sku && (
+                        <p className="text-xs text-muted-foreground font-mono mt-0.5">
+                            {product.sku}
+                        </p>
+                    )}
+                </div>
+                <div className="flex items-center gap-4 flex-shrink-0">
+                    {product.inStock ? (
+                        <Badge variant="secondary" className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider">
+                            In Stock
+                        </Badge>
+                    ) : (
+                        <Badge variant="secondary" className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider">
+                            Out of Stock
+                        </Badge>
+                    )}
+                    <p className="text-sm font-bold whitespace-nowrap">
+                        {product.price.__typename === 'PriceRange' ? (
+                            product.price.min !== product.price.max ? (
+                                <>
+                                    from <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                </>
+                            ) : (
+                                <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                            )
+                        ) : product.price.__typename === 'SinglePrice' ? (
+                            <Price value={product.price.value} currencyCode={product.currencyCode} taxLabel="excl" />
+                        ) : null}
+                    </p>
+                    {isExpanded ? (
+                        <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                    ) : (
+                        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    )}
+                </div>
+            </div>
+            {isExpanded && (
+                <ProductListExpansion slug={product.slug} productName={product.productName} currencyCode={product.currencyCode} />
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/product-card.tsx

@@ -0,0 +1,89 @@
+import Image from 'next/image';
+import {useTranslations} from 'next-intl';
+import {Package} from 'lucide-react';
+import { FragmentOf, readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { Price } from '@/components/commerce/price';
+import { Suspense } from 'react';
+import { PrefetchLink } from '@/components/shared/prefetch-link';
+import { Badge } from '@/components/ui/badge';
+import { HighlightedText } from './highlighted-text';
+
+interface ProductCardProps {
+    product: FragmentOf<typeof ProductCardFragment>;
+}
+
+export function ProductCard({ product: productProp }: ProductCardProps) {
+    const product = readFragment(ProductCardFragment, productProp);
+    const t = useTranslations('Product');
+
+    return (
+        <PrefetchLink
+            href={`/product/${product.slug}`}
+            className="group block bg-card rounded-lg overflow-hidden border border-border hover:border-primary/40 transition-colors"
+        >
+            <div className="aspect-[4/3] relative bg-muted">
+                {product.productAsset ? (
+                    <Image
+                        src={product.productAsset.preview}
+                        alt={product.productName}
+                        fill
+                        className="object-cover group-hover:scale-105 transition-transform duration-300"
+                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    />
+                ) : (
+                    <div
+                        className="w-full h-full flex items-center justify-center text-muted-foreground"
+                        aria-label={t('noImage')}
+                    >
+                        <Package className="h-10 w-10 text-muted-foreground/30" aria-hidden />
+                    </div>
+                )}
+                {/* Stock badge overlay */}
+                <div className="absolute top-2 right-2">
+                    {product.inStock ? (
+                        <Badge variant="secondary" className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider">
+                            {t('inStock')}
+                        </Badge>
+                    ) : (
+                        <Badge variant="secondary" className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider">
+                            {t('outOfStock')}
+                        </Badge>
+                    )}
+                </div>
+            </div>
+            <div className="p-3 space-y-1.5">
+                <h3 className="font-medium text-sm line-clamp-2 leading-snug group-hover:text-primary transition-colors">
+                    {product.productName}
+                </h3>
+                {product.highlights.length > 0 && product.highlights[0].matchedTokens.length > 0 && (
+                    <HighlightedText
+                        text={product.productName}
+                        matchedTokens={product.highlights[0].matchedTokens}
+                        className="text-xs text-muted-foreground line-clamp-2"
+                    />
+                )}
+                {product.sku && (
+                    <p className="text-xs text-muted-foreground font-mono">
+                        {product.sku}
+                    </p>
+                )}
+                <Suspense fallback={<div className="h-6 w-28 rounded bg-muted" />}>
+                    <p className="text-base font-bold">
+                        {product.price.__typename === 'PriceRange' ? (
+                            product.price.min !== product.price.max ? (
+                                <>
+                                    {t('from')} <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                </>
+                            ) : (
+                                <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                            )
+                        ) : product.price.__typename === 'SinglePrice' ? (
+                            <Price value={product.price.value} currencyCode={product.currencyCode} taxLabel="excl" />
+                        ) : null}
+                    </p>
+                </Suspense>
+            </div>
+        </PrefetchLink>
+    );
+}

package/dist/assets/storefront/src/components/commerce/product-carousel.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import {ProductCard} from "@/components/commerce/product-card";
+import {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious,} from "@/components/ui/carousel";
+import {FragmentOf} from "@/graphql";
+import {ProductCardFragment} from "@/lib/vendure/fragments";
+import {useId} from "react";
+
+interface ProductCarouselClientProps {
+    title: string;
+    products: Array<FragmentOf<typeof ProductCardFragment>>;
+}
+
+export function ProductCarousel({title, products}: ProductCarouselClientProps) {
+    const id = useId();
+
+    return (
+        <section className="py-12 md:py-16">
+            <div className="container mx-auto px-4">
+                <h2 className="text-3xl md:text-4xl font-bold mb-8">{title}</h2>
+                <Carousel
+                    opts={{
+                        align: "start",
+                        loop: true,
+                    }}
+                    className="w-full"
+                >
+                    <CarouselContent className="-ml-2 md:-ml-4">
+                        {products.map((product, i) => (
+                            <CarouselItem key={id + i}
+                                          className="pl-2 md:pl-4 basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4">
+                                <ProductCard product={product}/>
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                    <CarouselPrevious className="hidden md:flex"/>
+                    <CarouselNext className="hidden md:flex"/>
+                </Carousel>
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/components/commerce/product-grid.tsx

@@ -0,0 +1,54 @@
+import { Pagination } from '@/components/shared/pagination';
+import { SortDropdown } from './sort-dropdown';
+import { ProductViewSwitcher } from './product-view-switcher';
+import { type SearchProductsResult } from '@/lib/vendure/queries';
+import {getTranslations} from 'next-intl/server';
+import { PackageSearch } from 'lucide-react';
+import {EmptyState} from '@/components/ui/empty-state';
+
+interface ProductGridProps {
+    productDataPromise: SearchProductsResult;
+    currentPage: number;
+    take: number;
+    view?: string;
+    emptyMessage?: string;
+}
+
+export async function ProductGrid({ productDataPromise, currentPage, take, view, emptyMessage }: ProductGridProps) {
+    const [result, t] = await Promise.all([
+        productDataPromise,
+        getTranslations('Catalog'),
+    ]);
+
+    const searchResult = result.data.search;
+    const totalPages = Math.ceil(searchResult.totalItems / take);
+
+    if (!searchResult.items.length) {
+        return (
+            <EmptyState
+                icon={PackageSearch}
+                heading={t('noProductsFound')}
+                body={emptyMessage ?? t('emptySearchMessage')}
+                action={{label: t('browseAllProducts'), href: '/'}}
+            />
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            <ProductViewSwitcher
+                products={searchResult.items}
+                totalItems={searchResult.totalItems}
+                urlView={view}
+                currentPage={currentPage}
+                take={take}
+            >
+                <SortDropdown />
+            </ProductViewSwitcher>
+
+            {totalPages > 1 && (
+                <Pagination currentPage={currentPage} totalPages={totalPages} />
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/product-image-carousel.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import type { ProductDetail } from '@/lib/vendure/queries';
+
+export interface ProductImageCarouselProps {
+    images: ProductDetail['assets'];
+    selectedIndex?: number;
+    onIndexChange?: (index: number) => void;
+}
+
+export function ProductImageCarousel({ images, selectedIndex, onIndexChange }: ProductImageCarouselProps) {
+    const t = useTranslations('Product');
+    const [internalIndex, setInternalIndex] = useState(0);
+    const [loadedSources, setLoadedSources] = useState<Set<number>>(new Set());
+    const currentIndex = selectedIndex ?? internalIndex;
+
+    const updateIndex = (index: number) => {
+        setInternalIndex(index);
+        onIndexChange?.(index);
+    };
+
+    if (!images || images.length === 0) {
+        return (
+            <div className="aspect-[4/3] bg-muted rounded-lg flex items-center justify-center">
+                <span className="text-muted-foreground">{t('noImagesAvailable')}</span>
+            </div>
+        );
+    }
+
+    const currentImage = images[currentIndex];
+    const sourceLoaded = loadedSources.has(currentIndex);
+
+    const goToPrevious = () => {
+        updateIndex(currentIndex === 0 ? images.length - 1 : currentIndex - 1);
+    };
+
+    const goToNext = () => {
+        updateIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
+    };
+
+    return (
+        <div className="space-y-4">
+            {/* Main Image */}
+            <div className="relative aspect-[4/3] bg-muted rounded-lg overflow-hidden group">
+                {/* Preview image — always rendered, acts as placeholder */}
+                <Image
+                    src={currentImage.preview}
+                    alt={t('productImageAlt', {index: currentIndex + 1})}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 1024px) 100vw, 50vw"
+                    priority={currentIndex === 0}
+                />
+                {/* Source image — layered on top, fades in when loaded */}
+                <Image
+                    src={currentImage.source}
+                    alt={t('productImageAlt', {index: currentIndex + 1})}
+                    fill
+                    className={`object-cover transition-opacity duration-300 ${sourceLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    sizes="(max-width: 1024px) 100vw, 50vw"
+                    onLoad={() => {
+                        setLoadedSources((prev) => new Set(prev).add(currentIndex));
+                    }}
+                />
+
+                {/* Navigation Arrows */}
+                {images.length > 1 && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute left-2 top-1/2 -translate-y-1/2 bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={goToPrevious}
+                        >
+                            <ChevronLeft className="h-6 w-6" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-2 top-1/2 -translate-y-1/2 bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={goToNext}
+                        >
+                            <ChevronRight className="h-6 w-6" />
+                        </Button>
+                    </>
+                )}
+
+                {/* Image Counter */}
+                {images.length > 1 && (
+                    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-background/80 px-3 py-1 rounded-full text-sm">
+                        {currentIndex + 1} / {images.length}
+                    </div>
+                )}
+            </div>
+
+            {/* Thumbnail Grid */}
+            {images.length > 1 && (
+                <div className="grid grid-cols-4 gap-2">
+                    {images.map((image, index) => (
+                        <button
+                            key={image.id}
+                            onClick={() => updateIndex(index)}
+                            className={`aspect-square relative rounded-lg overflow-hidden border-2 transition-colors ${
+                                index === currentIndex
+                                    ? 'border-primary'
+                                    : 'border-transparent hover:border-muted-foreground'
+                            }`}
+                        >
+                            <Image
+                                src={image.preview}
+                                alt={t('thumbnailAlt', {index: index + 1})}
+                                fill
+                                className="object-cover"
+                                sizes="25vw"
+                            />
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}