{collection.name} | Brand Store

import { GetStaticPaths, GetStaticProps } from "next" import Head from "next/head" import Image from "next/image" import Link from "next/link" import { useState } from "react" import { Heart } from "lucide-react" import Header from "../../components/Header" import Footer from "../../components/Footer" import { collections, getCollectionBySlug } from "../../data/collections" import { Product, products, formatPrice } from "../../data/products" import { useRouter } from "next/router" import { motion } from "framer-motion" interface CollectionPageProps { collection: { id: number name: string image: string description: string url: string slug: string } // Для демонстрации используем все товары, в реальном проекте нужно связать коллекции с товарами products: Product[] } export default function CollectionPage({ collection, products }: CollectionPageProps) { const router = useRouter() const [hoveredProduct, setHoveredProduct] = useState(null) const [favorites, setFavorites] = useState([]) // Если страница еще загружается, показываем заглушку if (router.isFallback) { return (

) } // Функция для добавления/удаления товара из избранного const toggleFavorite = (id: number, e: React.MouseEvent) => { e.stopPropagation() e.preventDefault() setFavorites((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id])) } // Для демонстрации выбираем случайные товары для коллекции // В реальном приложении здесь должна быть логика выбора товаров по коллекции const collectionProducts = products.slice(0, 8) return (

{/* Баннер коллекции */}

{collection.name} {collection.description}

{/* Список товаров */}

← Все коллекции

Товары из коллекции

{collectionProducts.length > 0 ? (

{collectionProducts.map((product) => ( setHoveredProduct(product.id)} onMouseLeave={() => setHoveredProduct(null)} >

1 ? product.images[1] : product.images[0] } alt={product.name} fill sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw" className="object-cover transition-all duration-500 group-hover:scale-105" /> {product.isNew && ( Новинка )}

{product.name}

{formatPrice(product.price)} ₽

))}

) : (

В этой коллекции пока нет товаров

Вернуться на главную

)}

) } export const getStaticPaths: GetStaticPaths = async () => { const paths = collections.map((collection) => ({ params: { slug: collection.slug }, })) return { paths, fallback: 'blocking', } } export const getStaticProps: GetStaticProps = async ({ params }) => { const slug = params?.slug as string const collection = getCollectionBySlug(slug) if (!collection) { return { notFound: true, } } // Для демонстрации используем все товары, в реальном проекте нужно связать коллекции с товарами // Можно добавить фильтрацию по коллекции, если добавить поле collectionId в товары return { props: { collection, products, }, revalidate: 600, // Перегенерация страницы каждые 10 минут } }