--- import Navigation from '../../components/Navigation.astro'; import Logo from '../../components/Logo.astro'; import { Image } from 'astro:assets'; import { ChevronRight, Image as ImageIcon, Maximize, ArrowUpRight, MessageCircle, ArrowRight, X, ChevronLeft, Instagram } from '@lucide/astro'; import { PRODUCT_SERIES, getProductBySeries } from '../../data/products'; import '../../styles/global.css'; export async function getStaticPaths() { return PRODUCT_SERIES.map((series) => ({ params: { seriesId: series.id }, })); } const { seriesId } = Astro.params; const series = getProductBySeries(seriesId!); if (!series) { return Astro.redirect('/products'); } // Get color from URL query params, or use featured color const url = Astro.url; const colorParam = url.searchParams.get('color'); const selectedColorId = colorParam || series.colorVariants.find(v => v.id.includes(series.featuredColor || ''))?.id || series.colorVariants[0].id; const selectedVariant = series.colorVariants.find(v => v.id === selectedColorId) || series.colorVariants[0]; const currentImageIndex = 0; // Start with first image // Prepare variant data for client-side switching // We'll extract image URLs from the rendered images in the DOM // For now, store variant info - images will be extracted from DOM const variantData = series.colorVariants.map(variant => ({ id: variant.id, name: variant.name, imageCount: variant.images.length, })); --- {series.name} - Morutha

Beranda Produk {series.name}

{selectedVariant.images.length > 0 ? (

{/* Render all variant images, show only selected variant */} {series.colorVariants.map((variant) => ( variant.images.map((img, idx) => ( {`${series.name}

)) ))}