[V0_FILE]css:file="app/globals.css" isMerged="true" :root { --primary-color: #4a4a4a; --secondary-color: #6c6c6c; --accent-color: #e67e22; --background-color: #ffffff; --background-secondary: #f8f8f8; --text-color: #333333; --text-secondary: #666666; --border-color: #e0e0e0; --error-color: #e74c3c; --success-color: #2ecc71; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --container-width: 1280px; --header-height: 80px; --footer-height: 200px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; height: 100%; } body { color: var(--text-color); background: var(--background-color); font-family: "Inter", sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-lg); } @media (max-width: 1280px) { :root { --container-width: 1024px; } } @media (max-width: 1024px) { :root { --container-width: 768px; } } @media (max-width: 768px) { :root { --container-width: 100%; --header-height: 60px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } [V0_FILE]typescriptreact:file="shared/ui/button/Button.tsx" isMerged="true" import type { ButtonHTMLAttributes, ReactNode } from "react" import styles from "./Button.module.css" type ButtonVariant = "primary" | "secondary" | "outline" | "text" type ButtonSize = "sm" | "md" | "lg" interface ButtonProps extends ButtonHTMLAttributes { children: ReactNode variant?: ButtonVariant size?: ButtonSize fullWidth?: boolean className?: string } export const Button = ({ children, variant = "primary", size = "md", fullWidth = false, className = "", ...props }: ButtonProps) => { return ( ) } export default Button [V0_FILE]css:file="shared/ui/button/Button.module.css" isMerged="true" .button { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-weight: 500; transition: all var(--transition-fast); border: none; cursor: pointer; text-align: center; white-space: nowrap; } .button:disabled { opacity: 0.6; cursor: not-allowed; } .primary { background-color: var(--accent-color); color: white; } .primary:hover:not(:disabled) { background-color: #d35400; } .secondary { background-color: var(--primary-color); color: white; } .secondary:hover:not(:disabled) { background-color: #333333; } .outline { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-color); } .outline:hover:not(:disabled) { background-color: var(--background-secondary); } .text { background-color: transparent; color: var(--text-color); padding: 0; } .text:hover:not(:disabled) { color: var(--accent-color); } .sm { padding: 8px 16px; font-size: var(--font-size-sm); } .md { padding: 10px 20px; font-size: var(--font-size-md); } .lg { padding: 12px 24px; font-size: var(--font-size-lg); } .fullWidth { width: 100%; } [V0_FILE]typescriptreact:file="shared/ui/input/Input.tsx" isMerged="true" import type React from "react" import { type InputHTMLAttributes, forwardRef } from "react" import styles from "./Input.module.css" interface InputProps extends InputHTMLAttributes { label?: string error?: string className?: string leftIcon?: React.ReactNode rightIcon?: React.ReactNode } export const Input = forwardRef( ({ label, error, className = "", leftIcon, rightIcon, ...props }, ref) => { return (

{label && {label}}

{leftIcon &&

{leftIcon}

} {rightIcon &&

{rightIcon}

}

{error &&

{error}

}

) }, ) Input.displayName = "Input" export default Input [V0_FILE]css:file="shared/ui/input/Input.module.css" isMerged="true" .inputWrapper { display: flex; flex-direction: column; width: 100%; } .label { margin-bottom: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--text-secondary); } .inputContainer { position: relative; display: flex; align-items: center; } .input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-md); transition: border-color var(--transition-fast); background-color: var(--background-color); color: var(--text-color); } .input:focus { outline: none; border-color: var(--accent-color); } .input.error { border-color: var(--error-color); } .errorMessage { margin-top: var(--spacing-xs); color: var(--error-color); font-size: var(--font-size-sm); } .leftIcon, .rightIcon { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .leftIcon { left: 12px; } .rightIcon { right: 12px; } .hasLeftIcon { padding-left: 36px; } .hasRightIcon { padding-right: 36px; } [V0_FILE]typescriptreact:file="shared/ui/card/Card.tsx" isMerged="true" import type { ReactNode } from "react" import styles from "./Card.module.css" interface CardProps { children: ReactNode className?: string } export const Card = ({ children, className = "" }: CardProps) => { return

{children}

} export default Card [V0_FILE]css:file="shared/ui/card/Card.module.css" isMerged="true" .card { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .card:hover { box-shadow: var(--shadow-md); } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import type { Metadata } from "next" import Image from "next/image" import styles from "./page.module.css" export const metadata: Metadata = { title: "О нас", description: "Информация о нашем мебельном магазине", } export default function AboutPage() { return (

О нас

Мы - команда профессионалов, которая уже более 10 лет занимается производством и продажей качественной мебели для дома. Наша миссия - создавать комфортное пространство для жизни наших клиентов.

Мы предлагаем широкий ассортимент мебели: диваны, кровати и другие предметы интерьера. Вся продукция изготавливается из высококачественных материалов и соответствует современным стандартам.

Наши преимущества:

Собственное производство
Гарантия качества на всю продукцию
Индивидуальный подход к каждому клиенту
Бесплатная доставка по всей Беларуси
Возможность изготовления мебели по индивидуальным заказам

Мы стремимся к постоянному совершенствованию и развитию, чтобы предлагать нашим клиентам лучшие решения для их дома.

) } [V0_FILE]css:file="app/about/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } .content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } .imageWrapper { width: 100%; height: 100%; min-height: 400px; } .image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } .text { display: flex; flex-direction: column; gap: var(--spacing-md); } .text p { line-height: 1.6; } .advantagesList { list-style-type: disc; padding-left: var(--spacing-xl); margin: var(--spacing-sm) 0; } .advantagesList li { margin-bottom: var(--spacing-sm); } @media (max-width: 1024px) { .content { grid-template-columns: 1fr; } .imageWrapper { min-height: 300px; } } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } } [V0_FILE]typescriptreact:file="app/contacts/page.tsx" isMerged="true" import type { Metadata } from "next" import styles from "./page.module.css" export const metadata: Metadata = { title: "Контакты", description: "Контактная информация мебельного магазина", } export default function ContactsPage() { return (

Контакты

Адрес

г. Минск, ул. Примерная, 123

Телефон

+375 (29) 123-45-67

Email

info@furniture.by

Режим работы

Пн-Пт: 9:00 - 20:00

Сб-Вс: 10:00 - 18:00

) } [V0_FILE]css:file="app/contacts/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } .content { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } .contactInfo { display: flex; flex-direction: column; gap: var(--spacing-xl); } .contactBlock { display: flex; flex-direction: column; gap: var(--spacing-sm); } .contactTitle { font-size: var(--font-size-lg); font-weight: 600; } .contactText { line-height: 1.6; } .contactLink { color: var(--accent-color); transition: color var(--transition-fast); } .contactLink:hover { text-decoration: underline; } .mapWrapper { width: 100%; height: 100%; min-height: 400px; border-radius: var(--radius-lg); overflow: hidden; } .map { width: 100%; height: 100%; } @media (max-width: 1024px) { .content { grid-template-columns: 1fr; } .mapWrapper { min-height: 300px; } } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } } [V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true" import type { Metadata } from "next" import Link from "next/link" import Button from "@/shared/ui/button/Button" import styles from "./page.module.css" export const metadata: Metadata = { title: "Заказ успешно оформлен", description: "Ваш заказ успешно оформлен", } export default function SuccessPage() { return (

Заказ успешно оформлен!

Спасибо за ваш заказ! Номер вашего заказа: #12345

Мы отправили подтверждение на вашу электронную почту. Наш менеджер свяжется с вами в ближайшее время для уточнения деталей.

) } [V0_FILE]css:file="app/success/page.module.css" isMerged="true" .successPage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-3xl) 0; max-width: 600px; margin: 0 auto; } .successIcon { color: var(--success-color); margin-bottom: var(--spacing-lg); } .successTitle { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-md); } .successText { font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); } .successInfo { color: var(--text-secondary); margin-bottom: var(--spacing-xl); } .actions { margin-top: var(--spacing-lg); } @media (max-width: 768px) { .successTitle { font-size: var(--font-size-xl); } .successText { font-size: var(--font-size-md); } } [V0_FILE]png:file="public/mebelnyy-magazin.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mebelnyy-magazin-I5k7UAtTHTRzNPZNOyPzH0tudcg5lS.png" isMerged="true" [V0_FILE]png:file="public/modern-living-room.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-living-room-fjvLvArxgi6m1M0w0BXX0l8z8QmrrD.png" isMerged="true" [V0_FILE]png:file="public/modern-furniture-showroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-furniture-showroom-NdH2j1vinRdD9kgzsaSwakfVLzxIMJ.png" isMerged="true" [V0_FILE]png:file="public/furniture-delivery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/furniture-delivery-XvE2oR6pLJW4qBHKqsd0bX1gal2saM.png" isMerged="true" [V0_FILE]png:file="public/payment-methods.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/payment-methods-1rUJOrLjVxYnVPiU6oSyfguPIPKMXW.png" isMerged="true" [V0_FILE]typescriptreact:file="widgets/categories/ui/Categories.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import styles from "./Categories.module.css" export const Categories = () => { const categories = [ { id: "sofa", name: "Диваны", image: "/category-sofa.png", url: "/catalog/sofa", }, { id: "bed", name: "Кровати", image: "/category-bed.png", url: "/catalog/bed", }, ] return (

Категории

{categories.map((category) => (

{category.name}

))}

) } export default Categories [V0_FILE]css:file="widgets/categories/ui/Categories.module.css" isMerged="true" .categories { padding: var(--spacing-2xl) 0; background-color: var(--background-secondary); } .title { font-size: var(--font-size-2xl); font-weight: 700; text-align: center; margin-bottom: var(--spacing-xl); } .categoryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); } .categoryCard { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--background-color); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .categoryCard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .imageWrapper { width: 100%; height: 200px; overflow: hidden; } .image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .categoryCard:hover .image { transform: scale(1.05); } .categoryName { padding: var(--spacing-md); font-size: var(--font-size-lg); font-weight: 600; text-align: center; } @media (max-width: 768px) { .categories { padding: var(--spacing-xl) 0; } .title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-lg); } .categoryName { font-size: var(--font-size-md); } } [V0_FILE]typescriptreact:file="widgets/promo-section/ui/PromoSection.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import Button from "@/shared/ui/button/Button" import styles from "./PromoSection.module.css" export const PromoSection = () => { return (

Специальное предложение

Скидка 15% на все кровати и диваны при заказе до конца месяца. Используйте промокод МЕБЕЛЬ15 при оформлении заказа.

) } export default PromoSection [V0_FILE]css:file="widgets/promo-section/ui/PromoSection.module.css" isMerged="true" .promoSection { padding: var(--spacing-2xl) 0; } .promoCard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; background-color: var(--background-secondary); border-radius: var(--radius-lg); overflow: hidden; padding: var(--spacing-xl); } .content { display: flex; flex-direction: column; gap: var(--spacing-md); } .title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-color); } .description { font-size: var(--font-size-md); color: var(--text-secondary); line-height: 1.6; } .actions { margin-top: var(--spacing-md); } .imageWrapper { width: 100%; height: 100%; min-height: 250px; } .image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); } @media (max-width: 1024px) { .title { font-size: var(--font-size-xl); } } @media (max-width: 768px) { .promoCard { grid-template-columns: 1fr; } .content { order: 2; text-align: center; } .imageWrapper { order: 1; min-height: 200px; } } [V0_FILE]typescriptreact:file="widgets/reviews/ui/Reviews.tsx" isMerged="true" import Image from "next/image" import styles from "./Reviews.module.css" export const Reviews = () => { const reviews = [ { id: 1, name: "Анна Иванова", avatar: "/avatar-1.png", text: "Очень довольна покупкой дивана. Качество отличное, доставили быстро. Буду рекомендовать ваш магазин друзьям!", rating: 5, date: "15.04.2025", }, { id: 2, name: "Сергей Петров", avatar: "/avatar-2.png", text: "Заказывал кровать с подъемным механизмом. Все соответствует описанию, сборка была включена в стоимость. Очень удобная кровать!", rating: 5, date: "02.04.2025", }, { id: 3, name: "Екатерина Смирнова", avatar: "/avatar-3.png", text: "Спасибо за отличный сервис! Диван доставили в срок, качество на высоте. Единственное, хотелось бы больше вариантов обивки.", rating: 4, date: "28.03.2025", }, ] return (

Отзывы наших клиентов

{reviews.map((review) => (

{review.name}

{Array.from({ length: 5 }).map((_, index) => ( ★ ))}

{review.date}

{review.text}

))}

) } export default Reviews [V0_FILE]css:file="widgets/reviews/ui/Reviews.module.css" isMerged="true" .reviews { padding: var(--spacing-2xl) 0; } .title { font-size: var(--font-size-2xl); font-weight: 700; text-align: center; margin-bottom: var(--spacing-xl); } .reviewsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); } .reviewCard { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg); background-color: var(--background-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .reviewCard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .reviewHeader { display: flex; align-items: center; gap: var(--spacing-md); } .avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .reviewInfo { flex: 1; } .reviewName { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-xs); } .rating { display: flex; gap: 2px; } .star { color: var(--border-color); font-size: var(--font-size-md); } .star.filled { color: #f1c40f; } .reviewDate { font-size: var(--font-size-sm); color: var(--text-secondary); } .reviewText { font-size: var(--font-size-md); line-height: 1.6; color: var(--text-color); } @media (max-width: 768px) { .reviews { padding: var(--spacing-xl) 0; } .title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-lg); } .reviewsGrid { grid-template-columns: 1fr; } } [V0_FILE]png:file="public/category-sofa.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/category-sofa-jmpK6DVYhmdBTSK1g7DAz4MFkEl2He.png" isMerged="true" [V0_FILE]png:file="public/category-bed.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/category-bed-h75vJ1WTF8jQNdlBtClgd5ppBAi66j.png" isMerged="true" [V0_FILE]png:file="public/promo-furniture.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/promo-furniture-KdohSdrVjqfXBQOfbC0pEr1zdqFBoX.png" isMerged="true" [V0_FILE]png:file="public/avatar-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-1-7Z2CpGdwWKBD0KSta8L3bII3hHnixd.png" isMerged="true" [V0_FILE]png:file="public/avatar-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-2-TLRDmrmiKjyhFrP7fHHUEc2jdLKU95.png" isMerged="true" [V0_FILE]png:file="public/avatar-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-3-vGNrw5jYdshduKGkMFOW69USCYxwP8.png" isMerged="true" [V0_FILE]typescriptreact:file="entities/cart/model/types.ts" isMerged="true" import type { SofaData, BedData } from "@/shared/api/types" export interface CartItem { id: string product: SofaData | BedData quantity: number selectedSize: number | null withMechanism?: boolean totalPrice: number } export interface CartState { items: CartItem[] totalItems: number totalPrice: number } export type CartAction = | { type: "ADD_TO_CART"; payload: CartItem } | { type: "REMOVE_FROM_CART"; payload: string } | { type: "UPDATE_QUANTITY"; payload: { id: string; quantity: number } } | { type: "CLEAR_CART" } [V0_FILE]typescriptreact:file="entities/cart/model/cartContext.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect, type ReactNode } from "react" import type { CartState, CartAction, CartItem } from "./types" const initialState: CartState = { items: [], totalItems: 0, totalPrice: 0, } const calculateTotals = (items: CartItem[]): { totalItems: number; totalPrice: number } => { const totalItems = items.reduce((total, item) => total + item.quantity, 0) const totalPrice = items.reduce((total, item) => total + item.totalPrice, 0) return { totalItems, totalPrice } } const cartReducer = (state: CartState, action: CartAction): CartState => { switch (action.type) { case "ADD_TO_CART": { const existingItemIndex = state.items.findIndex( (item) => item.id === action.payload.id && item.selectedSize === action.payload.selectedSize && item.withMechanism === action.payload.withMechanism, ) let newItems if (existingItemIndex >= 0) { // Update existing item newItems = [...state.items] const existingItem = newItems[existingItemIndex] const updatedItem = { ...existingItem, quantity: existingItem.quantity + action.payload.quantity, totalPrice: existingItem.totalPrice + action.payload.totalPrice, } newItems[existingItemIndex] = updatedItem } else { // Add new item newItems = [...state.items, action.payload] } const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "REMOVE_FROM_CART": { const newItems = state.items.filter((item) => item.id !== action.payload) const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "UPDATE_QUANTITY": { const newItems = state.items.map((item) => { if (item.id === action.payload.id) { const newQuantity = action.payload.quantity const unitPrice = item.totalPrice / item.quantity return { ...item, quantity: newQuantity, totalPrice: unitPrice * newQuantity, } } return item }) const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "CLEAR_CART": return initialState default: return state } } const CartContext = createContext< | { state: CartState dispatch: React.Dispatch } | undefined >(undefined) export const CartProvider = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(cartReducer, initialState) // Load cart from localStorage on initial render useEffect(() => { try { const savedCart = localStorage.getItem("cart") if (savedCart) { const parsedCart = JSON.parse(savedCart) as CartState // Initialize with saved cart parsedCart.items.forEach((item) => { dispatch({ type: "ADD_TO_CART", payload: item }) }) } } catch (error) { console.error("Failed to load cart from localStorage:", error) } }, []) // Save cart to localStorage whenever it changes useEffect(() => { try { localStorage.setItem("cart", JSON.stringify(state)) } catch (error) { console.error("Failed to save cart to localStorage:", error) } }, [state]) return {children} } export const useCart = () => { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import Button from "@/shared/ui/button/Button" import Input from "@/shared/ui/input/Input" import { useCart } from "@/entities/cart/model/cartContext" import styles from "./page.module.css" export default function CheckoutPage() { const router = useRouter() const { state, dispatch } = useCart() const [isClient, setIsClient] = useState(false) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", phone: "", address: "", city: "", postalCode: "", paymentMethod: "card", deliveryMethod: "standard", }) const [errors, setErrors] = useState>({}) // Fix hydration issues useEffect(() => { setIsClient(true) }, []) if (!isClient) { return null } // Redirect to cart if cart is empty if (state.items.length === 0) { router.push("/cart") return null } const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) // Clear error when field is edited if (errors[name]) { setErrors((prev) => { const newErrors = { ...prev } delete newErrors[name] return newErrors }) } } const validateForm = () => { const newErrors: Record = {} if (!formData.firstName.trim()) newErrors.firstName = "Введите имя" if (!formData.lastName.trim()) newErrors.lastName = "Введите фамилию" if (!formData.email.trim()) newErrors.email = "Введите email" else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = "Введите корректный email" if (!formData.phone.trim()) newErrors.phone = "Введите телефон" if (!formData.address.trim()) newErrors.address = "Введите адрес" if (!formData.city.trim()) newErrors.city = "Введите город" if (!formData.postalCode.trim()) newErrors.postalCode = "Введите почтовый индекс" setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { // In a real app, you would send the order to the server here console.log("Order submitted:", { formData, items: state.items }) // Clear cart and redirect to success page dispatch({ type: "CLEAR_CART" }) router.push("/success") } } return (

Оформление заказа

Контактная информация

Адрес доставки

Способ доставки

Стандартная доставка

3-5 рабочих дней

Бесплатно

Экспресс-доставка

1-2 рабочих дня

300 руб.

Способ оплаты

Банковская карта

Visa, MasterCard, Мир

Наличными при получении

Ваш заказ

{state.items.map((item) => (

{item.product.name} x{item.quantity}

{item.totalPrice} руб.

))}

Товары ({state.totalItems}): {state.totalPrice} руб.

Доставка: {formData.deliveryMethod === "express" ? "300 руб." : "Бесплатно"}

Итого: {formData.deliveryMethod === "express" ? `${state.totalPrice + 300} руб.` : `${state.totalPrice} руб.`}

) } [V0_FILE]css:file="app/checkout/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } .checkoutContent { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } .checkoutForm { display: flex; flex-direction: column; gap: var(--spacing-xl); } .formSection { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); } .sectionTitle { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-md); } .formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .fullWidth { grid-column: 1 / -1; } .radioGroup { display: flex; flex-direction: column; gap: var(--spacing-sm); } .radioLabel { display: flex; align-items: center; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast); } .radioLabel:hover { border-color: var(--accent-color); } .radioLabel input[type="radio"] { margin-right: var(--spacing-md); } .radioContent { flex: 1; } .radioTitle { font-weight: 500; } .radioDescription { font-size: var(--font-size-sm); color: var(--text-secondary); } .radioPrice { font-weight: 500; } .formActions { display: flex; justify-content: space-between; margin-top: var(--spacing-md); } .orderSummary { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); height: fit-content; position: sticky; top: calc(var(--header-height) + var(--spacing-md)); } .summaryTitle { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .summaryItems { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); max-height: 300px; overflow-y: auto; } .summaryItem { display: flex; justify-content: space-between; padding: var(--spacing-sm) 0; } .itemInfo { display: flex; flex-direction: column; } .itemName { font-weight: 500; } .itemQuantity { font-size: var(--font-size-sm); color: var(--text-secondary); } .itemPrice { font-weight: 500; } .summaryTotals { display: flex; flex-direction: column; gap: var(--spacing-sm); padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); } .summaryRow { display: flex; justify-content: space-between; } .summaryTotal { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); font-weight: 600; font-size: var(--font-size-lg); } @media (max-width: 1024px) { .checkoutContent { grid-template-columns: 1fr; } .orderSummary { position: static; order: -1; margin-bottom: var(--spacing-md); } } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } .formGrid { grid-template-columns: 1fr; } .formActions { flex-direction: column; gap: var(--spacing-md); } .formActions button { width: 100%; } } [V0_FILE]typescriptreact:file="entities/favorites/model/favoritesContext.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect, type ReactNode } from "react" import type { FavoritesState, FavoritesAction } from "./types" const initialState: FavoritesState = { items: [], totalItems: 0, } const favoritesReducer = (state: FavoritesState, action: FavoritesAction): FavoritesState => { switch (action.type) { case "ADD_TO_FAVORITES": { const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id) if (existingItemIndex >= 0) { // Item already in favorites, do nothing return state } // Add new item const newItems = [...state.items, action.payload] return { items: newItems, totalItems: newItems.length } } case "REMOVE_FROM_FAVORITES": { const newItems = state.items.filter((item) => item.id !== action.payload) return { items: newItems, totalItems: newItems.length } } case "CLEAR_FAVORITES": return initialState default: return state } } const FavoritesContext = createContext< | { state: FavoritesState dispatch: React.Dispatch } | undefined >(undefined) export const FavoritesProvider = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(favoritesReducer, initialState) // Load favorites from localStorage on initial render useEffect(() => { try { const savedFavorites = localStorage.getItem("favorites") if (savedFavorites) { const parsedFavorites = JSON.parse(savedFavorites) as FavoritesState // Initialize with saved favorites parsedFavorites.items.forEach((item) => { dispatch({ type: "ADD_TO_FAVORITES", payload: item }) }) } } catch (error) { console.error("Failed to load favorites from localStorage:", error) } }, []) // Save favorites to localStorage whenever it changes useEffect(() => { try { localStorage.setItem("favorites", JSON.stringify(state)) } catch (error) { console.error("Failed to save favorites to localStorage:", error) } }, [state]) return {children} } export const useFavorites = () => { const context = useContext(FavoritesContext) if (context === undefined) { throw new Error("useFavorites must be used within a FavoritesProvider") } return context } [V0_FILE]typescriptreact:file="app/catalog/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/delivery/DeliveryPageClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import styles from "./page.module.css" export default function DeliveryPageClient() { const [activeTab, setActiveTab] = useState("delivery") const handleTabChange = (tab: string) => { setActiveTab(tab) } return (

Доставка и оплата

{activeTab === "delivery" && (

Мы осуществляем доставку по всей территории Республики Беларусь. Доставка осуществляется бесплатно при заказе от 500 рублей.

Сроки доставки:

Минск - 1-2 дня
Областные центры - 2-3 дня
Другие населенные пункты - 3-5 дней

Точную дату доставки вы можете уточнить у менеджера при оформлении заказа.

)} {activeTab === "payment" && (

Мы предлагаем несколько способов оплаты для вашего удобства:

Наличными при получении
Банковской картой при получении
Онлайн-оплата на сайте
Безналичный расчет (для юридических лиц)

Рассрочка и кредит:

Мы сотрудничаем с ведущими банками Беларуси и предлагаем возможность приобретения мебели в рассрочку или кредит:

Рассрочка от Альфа-Банка - до 4 месяцев без процентов
Рассрочка от БеларусБанка - до 6 месяцев без процентов
Кредит - до 36 месяцев по тарифам банка

)} {activeTab === "faq" && (

Как отслеживать статус заказа?

После оформления заказа вы получите уникальный номер, по которому можно отслеживать статус в личном кабинете или уточнить у менеджера по телефону.

Что делать, если товар не подошел?

Вы можете вернуть товар в течение 14 дней с момента получения, если он не был в использовании и сохранил товарный вид. Для этого свяжитесь с нашим менеджером.

Как оформить доставку в другой город?

При оформлении заказа укажите адрес доставки. Наш менеджер свяжется с вами для уточнения деталей и согласования даты доставки.

Можно ли заказать сборку мебели?

Да, мы предоставляем услугу сборки мебели. Стоимость зависит от сложности и объема работ. Уточните детали у менеджера при оформлении заказа.

)}

) } [V0_FILE]typescriptreact:file="app/delivery/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import DeliveryPageClient from "./DeliveryPageClient" export const metadata: Metadata = { title: "Доставка и оплата", description: "Информация о доставке и оплате", } export default function DeliveryPage() { return } [V0_FILE]css:file="app/delivery/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } .tabsContainer { margin-bottom: var(--spacing-xl); } .tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--border-color); } .tab { padding: var(--spacing-md) var(--spacing-xl); background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-size-md); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .tab:hover { color: var(--text-color); } .tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); } .content { display: flex; flex-direction: column; gap: var(--spacing-2xl); margin-bottom: var(--spacing-3xl); animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .section { display: flex; flex-direction: column; gap: var(--spacing-lg); } .sectionTitle { font-size: var(--font-size-2xl); font-weight: 600; padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-color); } .sectionContent { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } .text { display: flex; flex-direction: column; gap: var(--spacing-md); } .text p { line-height: 1.6; } .subTitle { font-size: var(--font-size-lg); font-weight: 600; margin-top: var(--spacing-md); } .list { list-style-type: disc; padding-left: var(--spacing-xl); margin: var(--spacing-sm) 0; } .list li { margin-bottom: var(--spacing-sm); } .imageWrapper { width: 100%; height: 100%; min-height: 300px; } .image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } .faqList { display: flex; flex-direction: column; gap: var(--spacing-lg); } .faqItem { padding: var(--spacing-lg); background-color: var(--background-secondary); border-radius: var(--radius-md); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .faqItem:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .faqQuestion { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-sm); } .faqAnswer { line-height: 1.6; } @media (max-width: 1024px) { .sectionContent { grid-template-columns: 1fr; } .imageWrapper { min-height: 250px; } } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } .tabs { flex-wrap: wrap; } .tab { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); } .sectionTitle { font-size: var(--font-size-xl); } .faqQuestion { font-size: var(--font-size-md); } } [V0_FILE]png:file="public/sofa-promo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sofa-promo-mYbnrL8MZYC7ulF3gZCqHawhpvv9qI.png" isMerged="true" [V0_FILE]png:file="public/bed-collection.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bed-collection-BhNzPHTgZOIFa9iDBzB3iz4dU0wxbx.png" isMerged="true" [V0_FILE]typescriptreact:file="widgets/hero-section/ui/HeroSection.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Button from "@/shared/ui/button/Button" import styles from "./HeroSection.module.css" export const HeroSection = () => { const [currentSlide, setCurrentSlide] = useState(0) const [isPaused, setIsPaused] = useState(false) const heroSlides = [ { title: "Создайте уютный дом с нашей мебелью", description: "Широкий выбор качественной мебели для вашего дома. Диваны, кровати и другая мебель с доставкой по всей Беларуси.", image: "/modern-living-room.png", buttonText: "Перейти в каталог", buttonLink: "/catalog", }, { title: "Специальное предложение на диваны", description: "Скидка до 15% на все диваны при заказе до конца месяца. Используйте промокод ДИВАН15 при оформлении заказа.", image: "/sofa-promo.png", buttonText: "Смотреть диваны", buttonLink: "/catalog?category=sofa", }, { title: "Новая коллекция кроватей", description: "Встречайте новую коллекцию кроватей с ортопедическими матрасами для здорового сна и отдыха.", image: "/bed-collection.png", buttonText: "Смотреть кровати", buttonLink: "/catalog?category=bed", }, ] // Auto-slide functionality useEffect(() => { if (isPaused) return const interval = setInterval(() => { setCurrentSlide((prev) => (prev === heroSlides.length - 1 ? 0 : prev + 1)) }, 6000) return () => clearInterval(interval) }, [isPaused, heroSlides.length]) const handleSlideChange = (index: number) => { setCurrentSlide(index) } const nextSlide = () => { setCurrentSlide((prev) => (prev === heroSlides.length - 1 ? 0 : prev + 1)) } const prevSlide = () => { setCurrentSlide((prev) => (prev === 0 ? heroSlides.length - 1 : prev - 1)) } return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} >

{heroSlides.map((slide, index) => (

{slide.title}

{slide.description}

))}

{heroSlides.map((_, index) => (

) } export default HeroSection [V0_FILE]css:file="widgets/hero-section/ui/HeroSection.module.css" isMerged="true" .heroSection { position: relative; overflow: hidden; height: 600px; } .sliderContainer { position: relative; width: 100%; height: 100%; overflow: hidden; } .sliderTrack { display: flex; transition: transform 0.6s ease; height: 100%; } .slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; } .slideBackground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(0.8); } .content { position: relative; z-index: 2; max-width: 600px; padding: var(--spacing-3xl) 0; color: white; animation: fadeIn 0.8s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .title { font-size: var(--font-size-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-lg); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .description { font-size: var(--font-size-lg); line-height: 1.6; margin-bottom: var(--spacing-xl); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .actions { margin-top: var(--spacing-md); } .sliderButton { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-md); } .sliderButton:hover { background-color: var(--accent-color); color: white; } .prevButton { left: 20px; } .nextButton { right: 20px; } .sliderDots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-sm); z-index: 10; } .sliderDot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; transition: all var(--transition-fast); } .sliderDot.active { background-color: var(--accent-color); transform: scale(1.2); } @media (max-width: 1024px) { .heroSection { height: 500px; } .title { font-size: var(--font-size-3xl); } .description { font-size: var(--font-size-md); } } @media (max-width: 768px) { .heroSection { height: 450px; } .content { text-align: center; padding: var(--spacing-xl) var(--spacing-md); margin: 0 auto; } .title { font-size: var(--font-size-2xl); } .sliderButton { width: 40px; height: 40px; } .prevButton { left: 10px; } .nextButton { right: 10px; } } @media (max-width: 576px) { .heroSection { height: 400px; } .title { font-size: var(--font-size-xl); } .description { font-size: var(--font-size-sm); } } [V0_FILE]typescriptreact:file="shared/api/api.ts" isMerged="true" import type { SofaData, BedData, ProductData } from "./types" const API_BASE_URL = "https://eb5cd2a292a9c526.mokky.dev" export async function getSofas(): Promise { try { const response = await fetch(`${API_BASE_URL}/sofa`) if (!response.ok) { throw new Error("Failed to fetch sofas") } return response.json() } catch (error) { console.error("Error fetching sofas:", error) return [] } } export async function getSofaBySlug(slug: string): Promise { try { const sofas = await getSofas() return sofas.find((sofa) => sofa.slug === slug) || null } catch (error) { console.error("Error fetching sofa by slug:", error) return null } } export async function getBeds(): Promise { try { const response = await fetch(`${API_BASE_URL}/bed`) if (!response.ok) { throw new Error("Failed to fetch beds") } return response.json() } catch (error) { console.error("Error fetching beds:", error) return [] } } export async function getBedBySlug(slug: string): Promise { try { const beds = await getBeds() return beds.find((bed) => bed.slug === slug) || null } catch (error) { console.error("Error fetching bed by slug:", error) return null } } export async function getPopularProducts(limit = 8): Promise<(SofaData | BedData)[]> { try { const [sofas, beds] = await Promise.all([getSofas(), getBeds()]) const allProducts = [...sofas, ...beds] // Filter products with popularity > 4.5 and sort by popularity const popularProducts = allProducts .filter((product) => product.popularity > 4.5) .sort((a, b) => b.popularity - a.popularity) .slice(0, limit) return popularProducts } catch (error) { console.error("Error fetching popular products:", error) return [] } } export async function getProductsByCategory(category: string): Promise<(SofaData | BedData)[]> { try { if (category === "sofa") { return await getSofas() } else if (category === "bed") { return await getBeds() } else { const [sofas, beds] = await Promise.all([getSofas(), getBeds()]) return [...sofas, ...beds] } } catch (error) { console.error(`Error fetching products by category ${category}:`, error) return [] } } export async function getProductsByPriceRange( minPrice: number, maxPrice: number, category = "all", ): Promise { try { const products = await getProductsByCategory(category) return products.filter((product) => product.price.current >= minPrice && product.price.current <= maxPrice) } catch (error) { console.error("Error filtering products by price range:", error) return [] } } export async function getProductsByFilters(filters: { category?: string minPrice?: number maxPrice?: number }): Promise { try { const { category = "all", minPrice, maxPrice } = filters let products = await getProductsByCategory(category) // Filter by price range if (minPrice !== undefined && maxPrice !== undefined) { products = products.filter((product) => product.price.current >= minPrice && product.price.current <= maxPrice) } return products } catch (error) { console.error("Error filtering products:", error) return [] } } export async function getPriceRange(): Promise<{ min: number; max: number }> { try { const [sofas, beds] = await Promise.all([getSofas(), getBeds()]) const allProducts = [...sofas, ...beds] const prices = allProducts.map((product) => product.price.current) const min = Math.min(...prices) const max = Math.max(...prices) return { min, max } } catch (error) { console.error("Error fetching price range:", error) return { min: 0, max: 10000 } // Default fallback } } // Add a new function to sort products export async function getSortedProducts(products: ProductData[], sortBy: string): Promise { const sortedProducts = [...products] switch (sortBy) { case "price-asc": return sortedProducts.sort((a, b) => a.price.current - b.price.current) case "price-desc": return sortedProducts.sort((a, b) => b.price.current - a.price.current) case "name-asc": return sortedProducts.sort((a, b) => a.name.localeCompare(b.name)) case "name-desc": return sortedProducts.sort((a, b) => b.name.localeCompare(a.name)) case "popularity": return sortedProducts.sort((a, b) => b.popularity - a.popularity) default: return sortedProducts } } [V0_FILE]css:file="app/catalog/page.module.css" isMerged="true" .catalogHeader { display: flex; justify-content: space-between; align-items: center; margin: var(--spacing-xl) 0; flex-wrap: wrap; gap: var(--spacing-md); } .title { font-size: var(--font-size-3xl); font-weight: 700; } .headerActions { display: flex; align-items: center; gap: var(--spacing-md); } .filterToggle { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--background-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); } .filterToggle:hover { background-color: var(--background-color); border-color: var(--accent-color); color: var(--accent-color); } .catalogLayout { margin-bottom: var(--spacing-3xl); } /* Filter Drawer */ .filterOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .filterOverlay.active { opacity: 1; visibility: visible; } .filterDrawer { position: fixed; top: 0; left: -320px; width: 320px; height: 100%; background-color: var(--background-color); z-index: 1001; box-shadow: var(--shadow-lg); transition: left 0.3s ease; overflow-y: auto; display: flex; flex-direction: column; } .filterDrawer.active { left: 0; } .filterDrawerHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .filterDrawerTitle { font-size: var(--font-size-lg); font-weight: 600; } .closeFilterButton { background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: color var(--transition-fast); } .closeFilterButton:hover { color: var(--accent-color); } .filterDrawerContent { padding: var(--spacing-md); flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .filterSection { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .filterSection:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .filterTitle { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); } .categoryButtons { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .categoryButton { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--background-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); } .categoryButton:hover { border-color: var(--accent-color); } .categoryButton.active { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .priceInputs { display: flex; align-items: center; gap: var(--spacing-sm); } .priceInput { flex: 1; } .priceDivider { color: var(--text-secondary); } .filterActions { margin-top: var(--spacing-lg); display: flex; justify-content: space-between; gap: var(--spacing-md); } .resetButton, .applyButton { flex: 1; } .productsSection { min-height: 400px; } .resultsInfo { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .resultsCount { font-size: var(--font-size-sm); color: var(--text-secondary); } .sortContainer { display: flex; align-items: center; gap: var(--spacing-sm); } .sortLabel { font-size: var(--font-size-sm); color: var(--text-secondary); } .sortSelect { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--background-color); font-size: var(--font-size-sm); cursor: pointer; transition: border-color var(--transition-fast); } .sortSelect:hover, .sortSelect:focus { border-color: var(--accent-color); outline: none; } .productGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } .loading, .noProducts { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 400px; color: var(--text-secondary); gap: var(--spacing-md); } .spinner { width: 40px; height: 40px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: var(--accent-color); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .noProducts p { margin-bottom: var(--spacing-md); } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); } .catalogHeader { flex-direction: column; align-items: flex-start; } .headerActions { width: 100%; justify-content: space-between; } } @media (max-width: 576px) { .filterDrawer { width: 280px; left: -280px; } .headerActions { flex-direction: column; align-items: stretch; } .sortContainer { width: 100%; } .sortSelect { flex: 1; } } [V0_FILE]typescriptreact:file="entities/recently-viewed/model/recentlyViewedContext.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect, type ReactNode } from "react" import type { SofaData, BedData } from "@/shared/api/types" export interface RecentlyViewedItem { id: string product: SofaData | BedData timestamp: number } export interface RecentlyViewedState { items: RecentlyViewedItem[] } export type RecentlyViewedAction = | { type: "ADD_VIEWED_PRODUCT"; payload: RecentlyViewedItem } | { type: "CLEAR_VIEWED_PRODUCTS" } const initialState: RecentlyViewedState = { items: [], } const MAX_RECENTLY_VIEWED = 10 const recentlyViewedReducer = (state: RecentlyViewedState, action: RecentlyViewedAction): RecentlyViewedState => { switch (action.type) { case "ADD_VIEWED_PRODUCT": { // Check if product already exists const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id) if (existingItemIndex >= 0) { // Update timestamp for existing item and move it to the front const updatedItems = [...state.items] const existingItem = { ...updatedItems[existingItemIndex], timestamp: action.payload.timestamp } updatedItems.splice(existingItemIndex, 1) // Remove existing item return { items: [existingItem, ...updatedItems] } // Add to front } // Add new item to the front, limit to MAX_RECENTLY_VIEWED items const newItems = [action.payload, ...state.items].slice(0, MAX_RECENTLY_VIEWED) return { items: newItems } } case "CLEAR_VIEWED_PRODUCTS": return initialState default: return state } } const RecentlyViewedContext = createContext< | { state: RecentlyViewedState dispatch: React.Dispatch addViewedProduct: (product: SofaData | BedData) => void } | undefined >(undefined) export const RecentlyViewedProvider = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(recentlyViewedReducer, initialState) // Load recently viewed from localStorage on initial render useEffect(() => { try { const savedItems = localStorage.getItem("recentlyViewed") if (savedItems) { const parsedItems = JSON.parse(savedItems) as RecentlyViewedItem[] // Initialize with saved items, adding them one by one to maintain order parsedItems.reverse().forEach((item) => { dispatch({ type: "ADD_VIEWED_PRODUCT", payload: item }) }) } } catch (error) { console.error("Failed to load recently viewed products from localStorage:", error) } }, []) // Save recently viewed to localStorage whenever it changes useEffect(() => { try { localStorage.setItem("recentlyViewed", JSON.stringify(state.items)) } catch (error) { console.error("Failed to save recently viewed products to localStorage:", error) } }, [state]) // Helper function to add a viewed product const addViewedProduct = (product: SofaData | BedData) => { dispatch({ type: "ADD_VIEWED_PRODUCT", payload: { id: product.id, product, timestamp: Date.now(), }, }) } return ( {children} ) } export const useRecentlyViewed = () => { const context = useContext(RecentlyViewedContext) if (context === undefined) { throw new Error("useRecentlyViewed must be used within a RecentlyViewedProvider") } return context } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { getPopularProducts } from "@/shared/api/api" import HeroSection from "@/widgets/hero-section/ui/HeroSection" import PopularProducts from "@/widgets/popular-products/ui/PopularProducts" import Categories from "@/widgets/categories/ui/Categories" import PromoSection from "@/widgets/promo-section/ui/PromoSection" import Reviews from "@/widgets/reviews/ui/Reviews" import RecentlyViewed from "@/widgets/recently-viewed/ui/RecentlyViewed" export default async function HomePage() { const popularProducts = await getPopularProducts(12) return ( <> ) } [V0_FILE]typescriptreact:file="app/products/[category]/[slug]/page.tsx" isMerged="true" import type { Metadata } from "next" import { getSofaBySlug, getBedBySlug } from "@/shared/api/api" import ProductDetail from "@/widgets/product-detail/ui/ProductDetail" import RecentlyViewed from "@/widgets/recently-viewed/ui/RecentlyViewed" import { notFound } from "next/navigation" interface ProductPageProps { params: { category: string slug: string } } export async function generateMetadata({ params }: ProductPageProps): Promise { const { category, slug } = params let product if (category === "sofa") { product = await getSofaBySlug(slug) } else if (category === "bed") { product = await getBedBySlug(slug) } if (!product) { return { title: "Товар не найден", description: "Запрашиваемый товар не найден", } } return { title: product.name, description: product.description, } } export default async function ProductPage({ params }: ProductPageProps) { const { category, slug } = params let product if (category === "sofa") { product = await getSofaBySlug(slug) } else if (category === "bed") { product = await getBedBySlug(slug) } if (!product) { notFound() } return ( <> ) } [V0_FILE]css:file="entities/product/ui/ProductCard.module.css" isMerged="true" .productCard { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); background-color: var(--background-color); box-shadow: var(--shadow-sm); position: relative; } .productCard:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .imageContainer { position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ overflow: hidden; } .imageWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .image.active { opacity: 1; } .inStock { position: absolute; top: 10px; right: 10px; background-color: var(--success-color); color: white; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 500; } .optionsButton { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 6px 12px; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); z-index: 2; } .optionsButton:hover, .optionsButton.active { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .optionsPanel { position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.98); z-index: 3; padding: var(--spacing-md); box-shadow: var(--shadow-md); animation: fadeIn 0.2s ease-in-out; border-radius: var(--radius-md); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .optionsHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-color); } .optionsTitle { font-size: var(--font-size-sm); font-weight: 600; } .closeOptionsButton { background: none; border: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: color var(--transition-fast); } .closeOptionsButton:hover { color: var(--accent-color); } .optionsContent { display: flex; flex-direction: column; gap: var(--spacing-md); } .optionGroup { margin-bottom: var(--spacing-sm); } .optionLabel { display: block; font-size: var(--font-size-xs); font-weight: 500; margin-bottom: 8px; } .sizeOptions { display: flex; flex-wrap: wrap; gap: 6px; } .sizeOption { padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background-color: var(--background-color); font-size: var(--font-size-xs); cursor: pointer; transition: all var(--transition-fast); } .sizeOption:hover { border-color: var(--accent-color); } .sizeOption.active { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .mechanismOption { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-xs); cursor: pointer; padding: 8px 10px; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); position: relative; } .mechanismOption:hover { background-color: var(--background-secondary); } .mechanismOption.active { background-color: rgba(230, 126, 34, 0.1); } .checkboxWrapper { display: flex; align-items: center; justify-content: center; } .customCheckbox { width: 18px; height: 18px; border: 1px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .customCheckbox.checked { background-color: var(--accent-color); border-color: var(--accent-color); color: white; } .mechanismText { flex: 1; } .content { display: flex; flex-direction: column; padding: var(--spacing-md); flex-grow: 1; } .title { font-size: var(--font-size-md); font-weight: 500; margin-bottom: var(--spacing-sm); color: var(--text-color); transition: color var(--transition-fast); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .title:hover { color: var(--accent-color); } .productOptions { margin-bottom: var(--spacing-sm); } .selectedSize { font-size: var(--font-size-xs); color: var(--text-secondary); } .price { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .currentPrice { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-color); } .oldPrice { font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: line-through; } .actions { display: flex; gap: var(--spacing-sm); margin-top: auto; } .addToCartButton { flex: 1; } .favoriteButton { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; } .favoriteActive { color: var(--accent-color); border-color: var(--accent-color); } @media (max-width: 768px) { .title { font-size: var(--font-size-sm); } .currentPrice { font-size: var(--font-size-md); } .oldPrice { font-size: var(--font-size-xs); } } [V0_FILE]css:file="widgets/product-detail/ui/ProductDetail.module.css" isMerged="true" .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; margin: var(--spacing-lg) 0; font-size: var(--font-size-sm); color: var(--text-secondary); } .breadcrumbLink { color: var(--text-secondary); transition: color var(--transition-fast); } .breadcrumbLink:hover { color: var(--accent-color); } .breadcrumbSeparator { margin: 0 var(--spacing-sm); } .breadcrumbCurrent { color: var(--text-color); font-weight: 500; } .productDetail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-2xl); } .gallery { display: flex; flex-direction: column; gap: var(--spacing-md); } .mainImage { width: 100%; height: 500px; border-radius: var(--radius-md); overflow: hidden; } .image { width: 100%; height: 100%; object-fit: cover; } .thumbnails { display: flex; gap: var(--spacing-sm); overflow-x: auto; padding-bottom: var(--spacing-sm); } .thumbnail { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-fast); flex-shrink: 0; } .thumbnail.active { border-color: var(--accent-color); } .thumbnailImage { width: 100%; height: 100%; object-fit: cover; } .info { display: flex; flex-direction: column; gap: var(--spacing-lg); } .title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-sm); } .availability { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-sm); } .availabilityText { color: var(--success-color); font-weight: 500; } .manufacturing { color: var(--text-secondary); } .price { display: flex; align-items: center; gap: var(--spacing-md); } .currentPrice { font-size: var(--font-size-2xl); font-weight: 700; } .oldPrice { font-size: var(--font-size-lg); color: var(--text-secondary); text-decoration: line-through; } .optionGroup { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); background-color: var(--background-secondary); border-radius: var(--radius-md); } .optionTitle { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-sm); } .sizeOptions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .sizeOption { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--background-color); cursor: pointer; transition: all var(--transition-fast); } .sizeOption:hover { border-color: var(--accent-color); } .sizeOption.active { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .mechanismOptions { display: flex; flex-direction: column; gap: var(--spacing-sm); } .mechanismOption { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; padding: var(--spacing-sm); border-radius: var(--radius-md); transition: background-color var(--transition-fast); } .mechanismOption:hover { background-color: rgba(255, 255, 255, 0.5); } .mechanismOption.active { background-color: rgba(230, 126, 34, 0.1); } .checkboxWrapper { display: flex; align-items: center; justify-content: center; } .customCheckbox { width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .mechanismOption.active .customCheckbox { border-color: var(--accent-color); background-color: var(--accent-color); color: white; } .customCheckbox.checked { border-color: var(--accent-color); background-color: var(--accent-color); color: white; } .actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-md); } .addToCartButton { flex: 1; } .favoriteButton { display: flex; align-items: center; gap: var(--spacing-sm); } .favoriteActive { color: var(--accent-color); border-color: var(--accent-color); } .details { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-3xl); } .tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-lg); } .tab { padding: var(--spacing-md) var(--spacing-lg); background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-size-md); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .tab:hover { color: var(--text-color); } .tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); } .tabContent { padding: var(--spacing-md) 0; } .description, .materials { line-height: 1.6; } .description p { margin-bottom: var(--spacing-md); } .description h3 { font-size: var(--font-size-lg); font-weight: 600; margin: var(--spacing-lg) 0 var(--spacing-md); } .featuresList, .materialsList { display: flex; flex-direction: column; gap: var(--spacing-sm); } .featureItem, .materialItem { position: relative; padding-left: var(--spacing-lg); } .featureItem::before, .materialItem::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent-color); } .slider { position: relative; width: 100%; height: 500px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--spacing-md); } .sliderTrack { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; } .slide { flex: 0 0 100%; width: 100%; height: 100%; } .slideImage { width: 100%; height: 100%; object-fit: cover; } .sliderButton { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition-fast); } .sliderButton:hover { background-color: white; } .sliderButton:first-child { left: 10px; } .sliderButton:last-child { right: 10px; } .payment { line-height: 1.6; } .paymentList { margin: var(--spacing-md) 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .paymentItem { position: relative; padding-left: var(--spacing-lg); } .paymentItem::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent-color); } .installmentPlans { margin-top: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-lg); } .installmentPlan { padding: var(--spacing-md); background-color: var(--background-secondary); border-radius: var(--radius-md); } .installmentPlan h4 { margin-bottom: var(--spacing-sm); font-weight: 600; } .planDetails { display: flex; flex-direction: column; gap: var(--spacing-sm); } .planOption { line-height: 1.5; } .recommendations { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } .recommendationsTitle { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-xl); text-align: center; } .recommendationsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } @media (max-width: 1024px) { .productDetail { grid-template-columns: 1fr; } .mainImage { height: 400px; } .actions { flex-direction: column; } .slider { height: 400px; } } @media (max-width: 768px) { .breadcrumbs { font-size: var(--font-size-xs); } .title { font-size: var(--font-size-xl); } .currentPrice { font-size: var(--font-size-xl); } .mainImage { height: 300px; } .tabs { overflow-x: auto; flex-wrap: wrap; } .tab { padding: var(--spacing-sm) var(--spacing-md); white-space: nowrap; } .slider { height: 300px; } } [V0_FILE]typescriptreact:file="widgets/recently-viewed/ui/RecentlyViewed.tsx" isMerged="true" "use client" import { useRecentlyViewed } from "@/entities/recently-viewed/model/recentlyViewedContext" import ProductCard from "@/entities/product/ui/ProductCard" import styles from "./RecentlyViewed.module.css" export const RecentlyViewed = () => { const { state } = useRecentlyViewed() // Only show if there are items if (state.items.length === 0) { return null } // Limit to 4 most recent items const recentItems = state.items.slice(0, 4) return (

Недавно просмотренные

{recentItems.map((item) => (

))}

) } export default RecentlyViewed [V0_FILE]css:file="widgets/recently-viewed/ui/RecentlyViewed.module.css" isMerged="true" .recentlyViewed { padding: var(--spacing-2xl) 0; background-color: var(--background-color); } .sectionHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); } .title { font-size: var(--font-size-2xl); font-weight: 700; } .productsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } .productWrapper { width: 100%; height: 100%; } @media (max-width: 768px) { .recentlyViewed { padding: var(--spacing-xl) 0; } .title { font-size: var(--font-size-xl); } } @media (max-width: 576px) { .productsGrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } [V0_FILE]typescriptreact:file="widgets/product-detail/ui/ProductDetail.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import type { SofaData, BedData } from "@/shared/api/types" import Button from "@/shared/ui/button/Button" import { useCart } from "@/entities/cart/model/cartContext" import { useFavorites } from "@/entities/favorites/model/favoritesContext" import { useRecentlyViewed } from "@/entities/recently-viewed/model/recentlyViewedContext" import ProductCard from "@/entities/product/ui/ProductCard" import { getProductsByCategory } from "@/shared/api/api" import styles from "./ProductDetail.module.css" interface ProductDetailProps { product: SofaData | BedData } export const ProductDetail = ({ product }: ProductDetailProps) => { const [activeTab, setActiveTab] = useState("description") const [selectedSize, setSelectedSize] = useState(0) // Default to first size const [withMechanism, setWithMechanism] = useState(false) const [currentSlide, setCurrentSlide] = useState(0) const [similarProducts, setSimilarProducts] = useState<(SofaData | BedData)[]>([]) const productLoadedRef = useRef(false) const { state: cartState, dispatch: cartDispatch } = useCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFavorites() const { addViewedProduct } = useRecentlyViewed() const isBed = "bed" in product // Generate a unique ID for this product configuration const cartItemId = `${product.id}-${selectedSize}-${withMechanism}` // Check if this exact configuration is in cart const cartItem = cartState.items.find((item) => item.id === cartItemId) const isInCart = Boolean(cartItem) // Check if product is in favorites const isInFavorites = favoritesState.items.some((item) => item.id === product.id) // Add product to recently viewed - only once when component mounts useEffect(() => { if (!productLoadedRef.current) { addViewedProduct(product) productLoadedRef.current = true } }, [product, addViewedProduct]) // Load similar products useEffect(() => { const loadSimilarProducts = async () => { try { const category = isBed ? "bed" : "sofa" const products = await getProductsByCategory(category) // Filter out current product and limit to 4 products const filtered = products .filter((p) => p.id !== product.id) .sort(() => 0.5 - Math.random()) // Simple random sort .slice(0, 4) setSimilarProducts(filtered) } catch (error) { console.error("Error loading similar products:", error) } } loadSimilarProducts() }, [product.id, isBed]) // Slider navigation const nextSlide = () => { setCurrentSlide((prev) => (prev === product.images.length - 1 ? 0 : prev + 1)) } const prevSlide = () => { setCurrentSlide((prev) => (prev === 0 ? product.images.length - 1 : prev - 1)) } const goToSlide = (index: number) => { setCurrentSlide(index) } // Safely get sizes based on product type const getSizes = () => { if (isBed && product.bed && Array.isArray(product.bed)) { return product.bed.map((size) => ({ width: size.width, length: size.length, price: size.price, })) } else if ( !isBed && "sizes" in product && product.sizes && product.sizes.sofa && Array.isArray(product.sizes.sofa) ) { return product.sizes.sofa.map((size) => ({ width: size.width, length: size.length, price: size.price, })) } return [] } const sizes = getSizes() // Get price with selected options const getPrice = () => { if (selectedSize === null || !sizes || sizes.length === 0) { return product.price.current } let price = sizes[selectedSize].price // Add mechanism price for beds if ( isBed && withMechanism && product.bed && product.bed[selectedSize] && product.bed[selectedSize].lifting_mechanism && product.bed[selectedSize].lifting_mechanism.length > 1 ) { price += product.bed[selectedSize].lifting_mechanism[1].price } return price } const handleAddToCart = () => { if (selectedSize === null) return const price = getPrice() cartDispatch({ type: "ADD_TO_CART", payload: { id: cartItemId, product, quantity: 1, // Always add with quantity 1 selectedSize, withMechanism, totalPrice: price, }, }) } const handleToggleFavorite = () => { if (isInFavorites) { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: product.id, }) } else { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: product.id, product, }, }) } } // Safely check if lifting mechanism is available const hasLiftingMechanism = () => { return ( isBed && selectedSize !== null && product.bed && product.bed[selectedSize] && product.bed[selectedSize].lifting_mechanism && product.bed[selectedSize].lifting_mechanism.length > 1 ) } // Toggle mechanism with a single click const handleToggleMechanism = () => { setWithMechanism(!withMechanism) } return (

Главная / Каталог / {isBed ? "Кровати" : "Диваны"} / {product.name}

{product.images.map((image, index) => (

))}

{product.images.map((image, index) => (

goToSlide(index)} > {`${product.name}

))}

{product.name}

{product.availability} {product.manufacturing && {product.manufacturing}}

{getPrice()} руб. {product.price.old && {product.price.old} руб.}

{sizes.length > 0 && (

Размер:

{sizes.map((size, index) => ( ))}

)} {hasLiftingMechanism() && (

Подъемный механизм:

{withMechanism && ( )}

Добавить подъемный механизм (+ {product.bed[selectedSize as number].lifting_mechanism[1].price} руб.)

)}

{activeTab === "description" && (

{product.description}

Характеристики:

{feature}
Страна: {product.country}
Гарантия: {product.warranty}

)} {activeTab === "materials" && (

{material.localizedTitles.ru}: {material.type}

)} {activeTab === "payment" && (

Варианты оплаты:

Наличными при получении - оплата производится курьеру при доставке
Банковской картой - оплата картой при получении или онлайн на сайте
Безналичный расчет - для юридических лиц

{product.installment_plans && product.installment_plans.length > 0 && ( <>

Рассрочка и кредит:

{product.installment_plans.map((plan, index) => (

{plan.bank}

Рассрочка: {plan.installment.duration_months} мес., процент:{" "} {plan.installment.interest}, доп. комиссии: {plan.installment.additional_fees}

Кредит: до {plan.credit.duration_months} мес., процент:{" "} {plan.credit.interest}

))}

)}

{similarProducts.length > 0 && (

Как выбрать ткань для мебели?

Износостойкость

Обратите внимание на показатель износостойкости (количество циклов). Для мебели, которая используется ежедневно, рекомендуется выбирать ткани с показателем от 30 000 циклов.

Состав ткани

Натуральные ткани приятны на ощупь, но менее практичны. Синтетические ткани более долговечны и устойчивы к загрязнениям. Оптимальный вариант — смесовые ткани, сочетающие лучшие качества.

Практичность

Для семей с детьми и домашними животными рекомендуются ткани с водоотталкивающей пропиткой, легко чистящиеся и не накапливающие шерсть и пыль.

Эстетика

Выбирайте ткань, которая гармонирует с общим стилем интерьера. Учитывайте не только цвет, но и фактуру, рисунок и текстуру ткани.

) } export default FabricInfo [V0_FILE]css:file="widgets/fabric-info/ui/FabricInfo.module.css" isMerged="true" .infoSection { padding: var(--spacing-3xl) 0; background-color: var(--background-secondary); margin-top: var(--spacing-3xl); } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } .content { display: flex; flex-direction: column; gap: var(--spacing-lg); } .title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-lg); color: var(--text-color); } .infoGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } .infoCard { background-color: var(--background-color); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .infoCard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .iconWrapper { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--accent-color); color: white; margin-bottom: var(--spacing-sm); } .cardTitle { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-sm); } .cardText { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; } .imageContainer { width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .image { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1024px) { .container { grid-template-columns: 1fr; } .imageContainer { order: -1; max-height: 400px; } } @media (max-width: 768px) { .infoSection { padding: var(--spacing-xl) 0; } .title { font-size: var(--font-size-xl); } .infoGrid { grid-template-columns: 1fr; } .imageContainer { max-height: 300px; } } [V0_FILE]typescriptreact:file="app/fabrics/page.tsx" isMerged="true" import type { Metadata } from "next" import { getFabricCategories } from "@/shared/api/fabric-api" import FabricCategoryCard from "@/entities/fabric/ui/FabricCategoryCard" import FabricInfo from "@/widgets/fabric-info/ui/FabricInfo" import styles from "./page.module.css" export const metadata: Metadata = { title: "Ткани для мебели", description: "Широкий выбор тканей для мебели: велюр, шенилл и другие. Выбирайте ткани для вашей мебели.", } export default async function FabricsPage() { const categories = await getFabricCategories() return (

Ткани для мебели

Выберите категорию ткани, чтобы просмотреть доступные коллекции и варианты. Мы предлагаем широкий выбор качественных тканей для вашей мебели.

{categories.length > 0 ? (

{categories.map((category) => ( ))}

) : (

В данный момент категории тканей недоступны. Пожалуйста, попробуйте позже.

)}

) } [V0_FILE]css:file="app/fabrics/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0 var(--spacing-md); text-align: center; } .description { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-xl); color: var(--text-secondary); line-height: 1.6; } .categoriesGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); } .noCategories { text-align: center; padding: var(--spacing-xl); background-color: var(--background-secondary); border-radius: var(--radius-md); color: var(--text-secondary); } @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0 var(--spacing-sm); } .description { font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); } .categoriesGrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--spacing-md); } } [V0_FILE]png:file="public/fabric-selection-guide.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fabric-selection-guide-mvuHL3fpIvlLw9hG2Zn7hvbAV4v4CR.png" isMerged="true" [V0_FILE]typescriptreact:file="widgets/header/ui/Header.module.css" isQuickEdit="true" isMerged="true" .header { position: sticky; top: 0; z-index: 100; background-color: var(--background-color); box-shadow: var(--shadow-sm); height: var(--header-height); } .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo { display: flex; align-items: center; } .logoText { font-size: 28px; font-weight: 700; color: var(--accent-color); letter-spacing: 1px; } .desktopNav { display: flex; align-items: center; } .navList { display: flex; gap: var(--spacing-lg); } .navItem { position: relative; } .navLink { font-size: var(--font-size-md); font-weight: 500; color: var(--text-color); transition: color var(--transition-fast); display: block; padding: var(--spacing-sm) 0; } .navLink:hover { color: var(--accent-color); } .actions { display: flex; align-items: center; gap: var(--spacing-md); } .actionButton { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color var(--transition-fast); } .actionButton:hover { background-color: var(--background-secondary); } .iconWrapper { position: relative; display: flex; align-items: center; justify-content: center; } .badge { position: absolute; top: -8px; right: -8px; background-color: var(--accent-color); color: white; font-size: 12px; font-weight: 600; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .menuButton { display: none; background: none; border: none; width: 40px; height: 40px; position: relative; cursor: pointer; z-index: 110; } .menuIcon, .menuIcon::before, .menuIcon::after { display: block; position: absolute; height: 2px; width: 24px; background-color: var(--text-color); transition: transform 0.3s ease, opacity 0.3s ease; } .menuIcon { top: 50%; left: 50%; transform: translate(-50%, -50%); } .menuIcon::before, .menuIcon::after { content: ""; left: 0; } .menuIcon::before { top: -8px; } .menuIcon::after { bottom: -8px; } /* Active menu button styles */ .menuButton.active .menuIcon { background-color: transparent; } .menuButton.active .menuIcon::before { top: 0; transform: rotate(45deg); } .menuButton.active .menuIcon::after { bottom: 0; transform: rotate(-45deg); } .mobileMenuOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobileMenuOverlay.active { opacity: 1; visibility: visible; } .mobileMenuHeader { display: none; padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; } .mobileLogo { display: flex; align-items: center; } .mobileLogo .logoText { font-size: 24px; } .closeMenuButton { background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: color var(--transition-fast); } .closeMenuButton:hover { color: var(--accent-color); } .mobileActions { display: none; padding: var(--spacing-md); border-top: 1px solid var(--border-color); gap: var(--spacing-md); } .mobileActionButton { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-radius: var(--radius-md); background-color: var(--background-secondary); color: var(--text-color); font-weight: 500; position: relative; transition: background-color var(--transition-fast); } .mobileActionButton:hover { background-color: var(--accent-color); color: white; } .mobileBadge { position: absolute; top: 8px; right: 8px; background-color: var(--accent-color); color: white; font-size: 12px; font-weight: 600; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mobileContact { display: none; padding: var(--spacing-md); border-top: 1px solid var(--border-color); text-align: center; } .mobilePhone { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); font-size: var(--font-size-lg); font-weight: 600; color: var(--text-color); } @media (max-width: 1024px) { .navList { gap: var(--spacing-md); } } @media (max-width: 768px) { .menuButton { display: block; order: 1; } .logo { order: 2; } .actions { order: 3; } .desktopNav { display: none; } .mobileMenuOverlay { display: block; } .nav { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background-color: var(--background-color); overflow-y: auto; transition: right 0.3s ease; z-index: 101; display: flex; flex-direction: column; } .nav.active { right: 0; box-shadow: var(--shadow-lg); } .mobileMenuHeader { display: flex; } .navList { flex-direction: column; width: 100%; padding: var(--spacing-md); gap: 0; } .navItem { width: 100%; border-bottom: 1px solid var(--border-color); } .navItem:last-child { border-bottom: none; } .navLink { display: block; padding: var(--spacing-md) 0; width: 100%; } .mobileActions { display: flex; } .mobileContact { display: block; } } [V0_FILE]typescriptreact:file="widgets/footer/ui/Footer.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import styles from "./Footer.module.css" export const Footer = () => { return ( ) } export default Footer [V0_FILE]typescriptreact:file="widgets/footer/ui/Footer.module.css" isQuickEdit="true" isMerged="true" .footer { background-color: var(--background-secondary); padding: var(--spacing-xl) 0; margin-top: var(--spacing-3xl); } .container { display: flex; flex-direction: column; gap: var(--spacing-xl); } .top { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); } .column { display: flex; flex-direction: column; gap: var(--spacing-md); } .logo { display: inline-block; margin-bottom: var(--spacing-sm); } .logoText { font-size: 28px; font-weight: 700; color: var(--accent-color); letter-spacing: 1px; } .description { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.6; } .title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-color); } .list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .link { color: var(--text-secondary); transition: color var(--transition-fast); font-size: var(--font-size-sm); } .link:hover { color: var(--accent-color); } .contactItem { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--text-secondary); font-size: var(--font-size-sm); } .bottom { border-top: 1px solid var(--border-color); padding-top: var(--spacing-lg); text-align: center; } .copyright { color: var(--text-secondary); font-size: var(--font-size-sm); } @media (max-width: 1024px) { .top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .top { grid-template-columns: 1fr; gap: var(--spacing-xl); } .column { text-align: center; align-items: center; } .contactItem { justify-content: center; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next/types" import { Inter } from "next/font/google" import Header from "@/widgets/header/ui/Header" import Footer from "@/widgets/footer/ui/Footer" import { CartProvider } from "@/entities/cart/model/cartContext" import { FavoritesProvider } from "@/entities/favorites/model/favoritesContext" import { RecentlyViewedProvider } from "@/entities/recently-viewed/model/recentlyViewedContext" import { FabricCartProvider } from "@/entities/fabric-cart/model/fabricCartContext" import { FabricFavoritesProvider } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import "./globals.css" const inter = Inter({ subsets: ["latin", "cyrillic"] }) export const metadata: Metadata = { title: "Dilavia - Мебель и ткани", description: "Магазин качественной мебели и тканей для вашего дома", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="entities/fabric/ui/SimpleFabricCard.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import Button from "@/shared/ui/button/Button" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import styles from "./SimpleFabricCard.module.css" import type { FabricVariant } from "@/shared/api/types" interface SimpleFabricCardProps { categoryName: string categoryNameRu: string collectionName: string collectionNameRu: string variant: FabricVariant className?: string } export const SimpleFabricCard = ({ categoryName, categoryNameRu, collectionName, collectionNameRu, variant, className = "", }: SimpleFabricCardProps) => { const [isHovered, setIsHovered] = useState(false) const { state: cartState, dispatch: cartDispatch } = useFabricCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFabricFavorites() // Генерируем уникальный ID для этого варианта ткани const variantId = `${categoryName}-${collectionName}-${variant.id}` // Проверяем, есть ли этот вариант в корзине const isInCart = cartState.items.some((item) => item.id === variantId) // Проверяем, есть ли этот вариант в избранном const isInFavorites = favoritesState.items.some((item) => item.id === variantId) // Фиксированная цена для примера (в реальном приложении должна приходить с сервера) const price = 1200 + variant.id * 100 const handleAddToCart = () => { if (isInCart) return cartDispatch({ type: "ADD_TO_CART", payload: { id: variantId, categoryName, categoryNameRu, collectionName, collectionNameRu, variant, quantity: 1, price, }, }) } const handleToggleFavorite = () => { if (isInFavorites) { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: variantId, }) } else { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: variantId, categoryName, categoryNameRu, collectionName, collectionNameRu, variant, }, }) } } const detailUrl = `/fabrics/${categoryName}/${collectionName}/${variant.id}` return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{variant.color.ru}

) } export default SimpleFabricCard [V0_FILE]css:file="entities/fabric/ui/SimpleFabricCard.module.css" isMerged="true" .card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); background-color: var(--background-color); position: relative; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .imageContainer { position: relative; width: 100%; height: 250px; overflow: hidden; display: block; } .image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .card:hover .image { transform: scale(1.05); } .colorName { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: white; padding: 12px; font-weight: 500; text-align: center; transition: opacity var(--transition-normal); } .actions { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: var(--spacing-sm); opacity: 0; transform: translateX(10px); transition: opacity var(--transition-normal), transform var(--transition-normal); } .actions.visible { opacity: 1; transform: translateX(0); } .addToCartButton, .favoriteButton { background-color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.9); color: var(--text-color); box-shadow: var(--shadow-sm); } .addToCartButton:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: white; } .favoriteButton { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .favoriteButton:hover { background-color: white; border-color: var(--accent-color); color: var(--accent-color); } .favoriteActive { color: var(--accent-color); border-color: var(--accent-color); } @media (max-width: 768px) { .imageContainer { height: 200px; } .actions { opacity: 1; transform: translateX(0); } } [V0_FILE]css:file="entities/fabric/ui/FabricCard.module.css" isMerged="true" .card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); background-color: var(--background-color); position: relative; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .imageContainer { position: relative; width: 100%; height: 200px; overflow: hidden; cursor: pointer; } .image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .card:hover .image { transform: scale(1.05); } .content { padding: var(--spacing-md); flex-grow: 1; display: flex; flex-direction: column; } .title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--text-color); } .collection { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-md); } .actions { display: flex; gap: var(--spacing-sm); margin-top: auto; } .addToCartButton { flex: 1; } .favoriteButton { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .favoriteActive { color: var(--accent-color); border-color: var(--accent-color); } /* Стили для модального окна с полноразмерным изображением */ .fullImageModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 2000; display: flex; align-items: center; justify-content: center; cursor: pointer; } .fullImageContainer { position: relative; max-width: 90%; max-height: 90%; } .fullImage { max-width: 100%; max-height: 90vh; object-fit: contain; } .closeButton { position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 24px; cursor: pointer; z-index: 2001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .imageContainer { height: 150px; } .title { font-size: var(--font-size-sm); } .collection { font-size: var(--font-size-xs); } } [V0_FILE]typescriptreact:file="entities/fabric-cart/model/fabricCartContext.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect, type ReactNode } from "react" import type { FabricCartItem as FabricCartItemType } from "@/shared/api/types" // Изменить интерфейс FabricCartItem interface FabricCartItem extends FabricCartItemType { quantity: number // Удаляем поле price } interface FabricCartState { items: FabricCartItem[] totalItems: number totalPrice: number } type FabricCartAction = | { type: "ADD_TO_CART"; payload: FabricCartItem } | { type: "REMOVE_FROM_CART"; payload: string } | { type: "UPDATE_QUANTITY"; payload: { id: string; quantity: number } } | { type: "CLEAR_CART" } const initialState: FabricCartState = { items: [], totalItems: 0, totalPrice: 0, } const calculateTotals = (items: FabricCartItem[]): { totalItems: number; totalPrice: number } => { const totalItems = items.reduce((total, item) => total + item.quantity, 0) // Цена тканей всегда 0 const totalPrice = 0 return { totalItems, totalPrice } } const fabricCartReducer = (state: FabricCartState, action: FabricCartAction): FabricCartState => { switch (action.type) { case "ADD_TO_CART": { const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id) let newItems if (existingItemIndex >= 0) { // Обновляем существующий элемент newItems = [...state.items] const existingItem = newItems[existingItemIndex] const updatedItem = { ...existingItem, quantity: existingItem.quantity + action.payload.quantity, } newItems[existingItemIndex] = updatedItem } else { // Добавляем новый элемент newItems = [...state.items, action.payload] } const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "REMOVE_FROM_CART": { const newItems = state.items.filter((item) => item.id !== action.payload) const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "UPDATE_QUANTITY": { const newItems = state.items.map((item) => { if (item.id === action.payload.id) { return { ...item, quantity: action.payload.quantity, } } return item }) const { totalItems, totalPrice } = calculateTotals(newItems) return { items: newItems, totalItems, totalPrice } } case "CLEAR_CART": return initialState default: return state } } const FabricCartContext = createContext< | { state: FabricCartState dispatch: React.Dispatch } | undefined >(undefined) export const FabricCartProvider = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(fabricCartReducer, initialState) // Загрузка корзины из localStorage при инициализации useEffect(() => { try { const savedCart = localStorage.getItem("fabricCart") if (savedCart) { const parsedCart = JSON.parse(savedCart) as FabricCartState // Инициализация сохраненной корзиной parsedCart.items.forEach((item) => { dispatch({ type: "ADD_TO_CART", payload: item }) }) } } catch (error) { console.error("Failed to load fabric cart from localStorage:", error) } }, []) // Сохранение корзины в localStorage при изменении useEffect(() => { try { localStorage.setItem("fabricCart", JSON.stringify(state)) } catch (error) { console.error("Failed to save fabric cart to localStorage:", error) } }, [state]) return {children} } export const useFabricCart = () => { const context = useContext(FabricCartContext) if (context === undefined) { throw new Error("useFabricCart must be used within a FabricCartProvider") } return context } [V0_FILE]typescriptreact:file="app/cart/page.module.css" isQuickEdit="true" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } .emptyCart { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-3xl) 0; max-width: 500px; margin: 0 auto; } .emptyCartIcon { color: var(--text-secondary); margin-bottom: var(--spacing-lg); } .emptyCartTitle { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-md); } .emptyCartText { color: var(--text-secondary); margin-bottom: var(--spacing-xl); } .cartContent { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } .cartHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .cartSectionTitle { font-size: var(--font-size-xl); font-weight: 600; } .cartItems { display: flex; flex-direction: column; gap: var(--spacing-md); } .cartItem { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: var(--spacing-md); align-items: center; padding: var(--spacing-md); background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .cartItem:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .itemImage { width: 120px; height: 120px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease; } .cartItem:hover .itemImage { transform: scale(1.05); } .image { width: 100%; height: 100%; object-fit: cover; } .itemInfo { display: flex; flex-direction: column; gap: var(--spacing-xs); } .itemName { font-size: var(--font-size-md); font-weight: 600; color: var(--text-color); transition: color var(--transition-fast); } .itemName:hover { color: var(--accent-color); } .itemOptions { font-size: var(--font-size-sm); color: var(--text-secondary); background-color: var(--background-secondary); padding: 4px 8px; border-radius: var(--radius-sm); display: inline-block; max-width: fit-content; } .itemQuantity { display: flex; align-items: center; gap: var(--spacing-sm); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .quantityButton { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--background-secondary); border: none; font-size: var(--font-size-md); font-weight: bold; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .quantityButton:hover { background-color: var(--accent-color); color: white; } .quantity { width: 36px; text-align: center; font-weight: 600; font-size: var(--font-size-md); } .itemPrice { font-size: var(--font-size-md); font-weight: 600; white-space: nowrap; background-color: var(--background-secondary); padding: 8px 12px; border-radius: var(--radius-md); color: var(--accent-color); } .removeButton { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .removeButton:hover { color: white; background-color: var(--error-color); border-color: var(--error-color); } /* Стили для табов корзины */ .cartTabs { display: flex; margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .cartTab { padding: var(--spacing-md) var(--spacing-lg); background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-size-md); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .cartTab:hover { color: var(--text-color); } .cartTab.activeTab { color: var(--accent-color); border-bottom-color: var(--accent-color); } .cartCategoryTitle { font-weight: 600; font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: #333; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; } .freeItem { color: #2ecc71; font-weight: 500; } .emptyTabCart { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background-color: #f9f9f9; border-radius: 8px; margin: 1rem 0; } .emptyTabCart p { margin-bottom: 1rem; color: #666; } .cartSummary { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-height) + var(--spacing-md)); height: fit-content; border: 1px solid var(--border-color); } .summaryHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); background-color: var(--background-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0; } .summaryTitle { font-size: var(--font-size-lg); font-weight: 600; } .clearCartButton { font-size: var(--font-size-sm); color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); padding: 4px 8px; border-radius: var(--radius-sm); } .clearCartButton:hover { color: var(--error-color); background-color: rgba(231, 76, 60, 0.1); } .promoCodeSection { padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .promoTitle { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-sm); } .promoCodeInput { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .applyPromoButton { white-space: nowrap; } .promoSuccess { color: var(--success-color); font-size: var(--font-size-sm); padding: var(--spacing-sm); background-color: rgba(46, 204, 113, 0.1); border-radius: var(--radius-sm); margin-top: var(--spacing-sm); } .appliedPromo { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); background-color: rgba(46, 204, 113, 0.1); border-radius: var(--radius-md); border-left: 3px solid var(--success-color); } .appliedPromoInfo { display: flex; flex-direction: column; } .appliedPromoCode { font-weight: 600; color: var(--success-color); } .appliedPromoDescription { font-size: var(--font-size-sm); color: var(--text-secondary); } .removePromoButton { background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast); } .removePromoButton:hover { color: var(--error-color); } .summaryContent { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); background-color: var(--background-color); border-radius: 0 0 var(--radius-md) var(--radius-md); } .summaryRow { display: flex; justify-content: space-between; font-size: var(--font-size-md); padding: 4px 0; } .discountRow { color: var(--accent-color); background-color: rgba(230, 126, 34, 0.05); padding: 8px; border-radius: var(--radius-sm); } .freeShipping { color: var(--success-color); font-weight: 500; } .summaryCategory { font-weight: 600; margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs); border-bottom: 1px dashed var(--border-color); } .summaryTotal { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); font-weight: 600; font-size: var(--font-size-lg); background-color: var(--background-secondary); padding: 12px 8px; border-radius: var(--radius-sm); } .checkoutButton { margin-top: var(--spacing-md); } .orderSuccess { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-3xl) 0; max-width: 500px; margin: 0 auto; } .successIcon { color: var(--success-color); margin-bottom: var(--spacing-lg); animation: scaleIn 0.5s ease-out; } .successTitle { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--success-color); } .successMessage { color: var(--text-secondary); margin-bottom: var(--spacing-xl); } .loader { width: 40px; height: 40px; border: 3px solid rgba(46, 204, 113, 0.2); border-radius: 50%; border-top-color: var(--success-color); animation: spin 1s ease-in-out infinite; } /* Checkout Form Styles */ .checkoutContainer { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); } .checkoutForm { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); border: 1px solid var(--border-color); } .checkoutTitle { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .formSection { margin-bottom: var(--spacing-xl); } .sectionTitle { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-color); } .formGroup { margin-bottom: var(--spacing-md); } .selectLabel { display: block; margin-bottom: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--text-secondary); } .select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-size-md); background-color: var(--background-color); color: var(--text-color); margin-bottom: var(--spacing-sm); } .select:focus { outline: none; border-color: var(--accent-color); } .socialMediaInputs { display: flex; flex-direction: column; gap: var(--spacing-sm); } .deliveryOptions, .paymentOptions { display: flex; flex-direction: column; gap: var(--spacing-sm); } .radioLabel { display: flex; align-items: center; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .radioLabel:hover { border-color: var(--accent-color); background-color: var(--background-secondary); } .radioLabel input[type="radio"] { margin-right: var(--spacing-md); } .radioContent { flex: 1; display: flex; justify-content: space-between; align-items: center; } .radioTitle { font-weight: 500; } .radioPrice { font-weight: 500; color: var(--accent-color); } .formActions { display: flex; justify-content: space-between; margin-top: var(--spacing-xl); } .backButton, .submitButton { min-width: 150px; } .orderSummary { background-color: var(--background-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); border: 1px solid var(--border-color); position: sticky; top: calc(var(--header-height) + var(--spacing-md)); height: fit-content; } .summaryItems { margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); max-height: 300px; overflow-y: auto; border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-md); } .summaryItem { display: flex; justify-content: space-between; padding: var(--spacing-sm) 0; border-bottom: 1px dashed var(--border-color); } .summaryItem:last-child { border-bottom: none; } .summaryItemInfo { display: flex; flex-direction: column; } .summaryItemName { font-weight: 500; font-size: var(--font-size-sm); } .summaryItemQuantity { font-size: var(--font-size-xs); color: var(--text-secondary); } .summaryItemPrice { font-weight: 500; font-size: var(--font-size-sm); } .summaryTotals { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Стили для модального окна с изображением */ .imageModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; display: flex; align-items: center; justify-content: center; } .imageModalContent { position: relative; max-width: 90%; max-height: 90%; } .closeModalButton { position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 30px; cursor: pointer; z-index: 1001; } .modalImage { max-width: 100%; max-height: 90vh; object-fit: contain; } @keyframes scaleIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1024px) { .cartContent, .checkoutContainer { grid-template-columns: 1fr; } .cartSummary, .orderSummary { position: static; order: -1; margin-bottom: var(--spacing-md); } } @media (max-width: 768px) { .cartTabs { flex-wrap: wrap; } .cartTab { flex: 1; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); } .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } .emptyCartTitle { font-size: var(--font-size-lg); } .cartItem { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; position: relative; padding-top: var(--spacing-xl); } .itemImage { grid-row: 1 / 4; width: 80px; height: 80px; } .itemInfo { grid-column: 2; grid-row: 1; } .itemQuantity { grid-column: 2; grid-row: 2; justify-self: start; margin-top: var(--spacing-sm); } .itemPrice { grid-column: 2; grid-row: 3; margin-top: var(--spacing-sm); } .removeButton { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); } .promoCodeInput { flex-direction: column; } .formActions { flex-direction: column; gap: var(--spacing-md); } .backButton, .submitButton { width: 100%; } } [V0_FILE]typescriptreact:file="shared/api/types.ts" isQuickEdit="true" isMerged="true" // Существующие типы export interface Price { current: number old?: number } export interface ProductData { id: string name: string slug: string description: string images: string[] price: Price availability: string manufacturing?: string popularity: number features?: string[] materials?: Material[] country: string warranty: string installment_plans?: InstallmentPlan[] } export interface SofaData extends ProductData { sizes?: { sofa?: Size[] } } export interface BedData extends ProductData { bed?: SizeWithMechanism[] } export interface Size { width: number length: number price: number } export interface SizeWithMechanism extends Size { lifting_mechanism: Mechanism[] } export interface Mechanism { type: string price: number } export interface Material { localizedTitles: { ru: string } type: string } export interface InstallmentPlan { bank: string installment: { duration_months: number interest: string additional_fees: string } credit: { duration_months: number interest: string } } // Новые типы для тканей export interface FabricCategory { name: string name_ru: string description_ru?: string collections: FabricCollection[] } export interface FabricCollection { name: string name_ru: string type: string availability: string description_ru?: string technicalSpecifications: { fabricType: string abrasionResistance: string density: string composition: string composition_ru: string width: string origin: string origin_ru: string collectionName?: string directionality?: string directionality_ru?: string applicationAreas_ru?: string[] } careInstructions_ru: string[] variants: FabricVariant[] } export interface FabricVariant { id: number color: { en: string ru: string } image: string } export interface FabricCartItem { id: string categoryName: string categoryNameRu: string collectionName: string collectionNameRu: string variant: FabricVariant quantity: number } export interface FabricFavoriteItem { id: string categoryName: string categoryNameRu: string collectionName: string collectionNameRu: string variant: FabricVariant } [V0_FILE]typescriptreact:file="entities/fabric/ui/FabricCard.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Button from "@/shared/ui/button/Button" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import styles from "./FabricCard.module.css" import type { FabricVariant } from "@/shared/api/types" interface FabricCardProps { categoryName: string categoryNameRu: string collectionName: string collectionNameRu: string variant: FabricVariant className?: string } export const FabricCard = ({ categoryName, categoryNameRu, collectionName, collectionNameRu, variant, className = "", }: FabricCardProps) => { const [isHovered, setIsHovered] = useState(false) const [showFullImage, setShowFullImage] = useState(false) const { state: cartState, dispatch: cartDispatch } = useFabricCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFabricFavorites() // Генерируем уникальный ID для этого варианта ткани const variantId = `${categoryName}-${collectionName}-${variant.id}` // Проверяем, есть ли этот вариант в корзине const isInCart = cartState.items.some((item) => item.id === variantId) // Проверяем, есть ли этот вариант в избранном const isInFavorites = favoritesState.items.some((item) => item.id === variantId) const handleAddToCart = () => { if (isInCart) return cartDispatch({ type: "ADD_TO_CART", payload: { id: variantId, categoryName, categoryNameRu, collectionName, collectionNameRu, variant, quantity: 1, }, }) } const handleToggleFavorite = () => { if (isInFavorites) { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: variantId, }) } else { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: variantId, categoryName, categoryNameRu, collectionName, collectionNameRu, variant, }, }) } } const handleImageClick = () => { setShowFullImage(true) } const handleCloseFullImage = () => { setShowFullImage(false) } return ( <>

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{variant.color.ru}

{collectionNameRu}

{/* Модальное окно с полноразмерным изображением */} {showFullImage && (

)} ) } export default FabricCard [V0_FILE]typescriptreact:file="entities/product/ui/ProductCard.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import Image from "next/image" import type { SofaData, BedData } from "@/shared/api/types" import Button from "@/shared/ui/button/Button" import { useCart } from "@/entities/cart/model/cartContext" import { useFavorites } from "@/entities/favorites/model/favoritesContext" import styles from "./ProductCard.module.css" interface ProductCardProps { product: SofaData | BedData className?: string showOptions?: boolean } export const ProductCard = ({ product, className = "", showOptions = false }: ProductCardProps) => { const [isHovered, setIsHovered] = useState(false) const [selectedSize, setSelectedSize] = useState(0) const [withMechanism, setWithMechanism] = useState(false) const [showOptionsPanel, setShowOptionsPanel] = useState(false) const { state: cartState, dispatch: cartDispatch } = useCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFavorites() const handleMouseEnter = () => { setIsHovered(true) } const handleMouseLeave = () => { setIsHovered(false) setShowOptionsPanel(false) } const isBed = "bed" in product const category = isBed ? "bed" : "sofa" const productUrl = `/products/${category}/${product.slug}` // Get sizes based on product type const getSizes = () => { if (isBed && product.bed && Array.isArray(product.bed)) { return product.bed.map((size) => ({ width: size.width, length: size.length, price: size.price, })) } else if ( !isBed && "sizes" in product && product.sizes && product.sizes.sofa && Array.isArray(product.sizes.sofa) ) { return product.sizes.sofa.map((size) => ({ width: size.width, length: size.length, price: size.price, })) } return [] } const sizes = getSizes() // Check if lifting mechanism is available for the selected size const hasLiftingMechanism = () => { return ( isBed && product.bed && product.bed[selectedSize] && product.bed[selectedSize].lifting_mechanism && product.bed[selectedSize].lifting_mechanism.length > 1 ) } // Get price with selected options const getPrice = () => { if (!sizes || sizes.length === 0) { return product.price.current } let price = sizes[selectedSize].price // Add mechanism price for beds if (isBed && withMechanism && hasLiftingMechanism()) { price += product.bed[selectedSize].lifting_mechanism[1].price } return price } // Generate a unique ID for this product configuration const getCartItemId = () => { return `${product.id}-${selectedSize}-${withMechanism}` } // Check if this exact configuration is in cart const isInCart = cartState.items.some((item) => item.id === getCartItemId()) // Check if product is in favorites const isInFavorites = favoritesState.items.some((item) => item.id === product.id) const handleAddToCart = () => { if (isInCart) { // Navigate to cart if already in cart window.location.href = "/cart" return } const price = getPrice() cartDispatch({ type: "ADD_TO_CART", payload: { id: getCartItemId(), product, quantity: 1, selectedSize, withMechanism, totalPrice: price, }, }) } const handleToggleFavorite = () => { if (isInFavorites) { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: product.id, }) } else { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: product.id, product, }, }) } } const toggleOptionsPanel = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setShowOptionsPanel(!showOptionsPanel) } // Handle single-click activation for mechanism checkbox const handleMechanismToggle = (e: React.MouseEvent) => { e.preventDefault() setWithMechanism(!withMechanism) } // Get primary and secondary images const primaryImage = product.images[0] || "/placeholder.svg" const secondaryImage = product.images[1] || product.images[0] || "/placeholder.svg" return (

{product.availability === "В наличии" && В наличии} {showOptions && isBed && sizes.length > 0 && ( )} {showOptions && showOptionsPanel && isBed && sizes.length > 0 && (

Выберите опции

Размер:

{sizes.map((size, index) => ( ))}

{hasLiftingMechanism() && (

{withMechanism && ( )}

Подъемный механизм (+ {product.bed[selectedSize].lifting_mechanism[1].price} руб.)

)}

{product.name} {isBed && sizes.length > 0 && (

{sizes[selectedSize].width}x{sizes[selectedSize].length} см {withMechanism && hasLiftingMechanism() ? ", с подъемным механизмом" : ""}

)}

{getPrice()} руб. {product.price.old && {product.price.old} руб.}

) } export default ProductCard [V0_FILE]typescriptreact:file="features/fabric-sort/ui/FabricSort.tsx" isMerged="true" "use client" import { useState } from "react" import styles from "./FabricSort.module.css" interface FabricSortProps { onSort: (sortOption: string) => void className?: string } export const FabricSort = ({ onSort, className = "" }: FabricSortProps) => { const [activeSortOption, setActiveSortOption] = useState("default") const sortOptions = [ { value: "default", label: "По умолчанию" }, { value: "name-asc", label: "По названию (А-Я)" }, { value: "name-desc", label: "По названию (Я-А)" }, { value: "newest", label: "Сначала новые" }, { value: "popularity", label: "По популярности" }, ] const handleSortChange = (option: string) => { setActiveSortOption(option) onSort(option) } return (

Сортировать:

{sortOptions.map((option) => ( ))}

) } export default FabricSort [V0_FILE]css:file="features/fabric-sort/ui/FabricSort.module.css" isMerged="true" .sortContainer { display: flex; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; } .sortLabel { font-weight: 500; margin-right: 1rem; color: #333; } .sortOptions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sortOption { padding: 0.5rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.25rem; background: none; cursor: pointer; font-size: 0.875rem; transition: all 0.2s ease; } .sortOption:hover { background-color: #f7fafc; } .sortOption.active { background-color: #f1f5f9; border-color: #cbd5e1; font-weight: 500; } .sortDropdown { display: none; position: relative; } .sortSelect { appearance: none; padding: 0.5rem 2rem 0.5rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.25rem; background-color: white; cursor: pointer; font-size: 0.875rem; width: 100%; } .sortDropdownIcon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Мобильная версия */ @media (max-width: 768px) { .sortOptions { display: none; } .sortDropdown { display: block; width: 100%; max-width: 250px; } } @media (max-width: 480px) { .sortContainer { flex-direction: column; align-items: flex-start; } .sortDropdown { width: 100%; max-width: 100%; } } [V0_FILE]css:file="app/fabrics/[categoryId]/[collectionId]/page.module.css" isMerged="true" .tabs { margin-top: 2rem; } .variantsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 1.5rem; } .sortComponent { margin-bottom: 1.5rem; } .specsContainer { padding: 1.5rem; background-color: #f8fafc; border-radius: 0.5rem; margin-top: 1.5rem; } .specsTable { width: 100%; border-collapse: collapse; } .specsTable th, .specsTable td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e2e8f0; } .specsTable th { font-weight: 600; color: #4a5568; width: 40%; } .specsTable td { color: #1a202c; } .applicationAreas { margin-top: 2rem; } .applicationTitle { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; color: #2d3748; } .applicationList { list-style-type: disc; padding-left: 1.5rem; } .applicationItem { margin-bottom: 0.5rem; color: #4a5568; } .careContainer { padding: 1.5rem; background-color: #f8fafc; border-radius: 0.5rem; margin-top: 1.5rem; } .careList { list-style-type: disc; padding-left: 1.5rem; } .careItem { margin-bottom: 0.75rem; color: #4a5568; line-height: 1.6; } @media (max-width: 768px) { .variantsGrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .specsTable th { width: 50%; } } @media (max-width: 480px) { .variantsGrid { grid-template-columns: 1fr; gap: 1.25rem; } .specsTable th, .specsTable td { display: block; width: 100%; } .specsTable th { padding-bottom: 0.25rem; border-bottom: none; } .specsTable td { padding-top: 0.25rem; padding-bottom: 1rem; } } [V0_FILE]typescriptreact:file="features/fabric-sort/ui/FabricSortClient.tsx" isMerged="true" "use client" import { useRouter, usePathname, useSearchParams } from "next/navigation" import FabricSort from "./FabricSort" interface FabricSortClientProps { className?: string } export const FabricSortClient = ({ className = "" }: FabricSortClientProps) => { const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() const handleSort = (sortOption: string) => { const params = new URLSearchParams(searchParams.toString()) if (sortOption === "default") { params.delete("sort") } else { params.set("sort", sortOption) } router.push(`${pathname}?${params.toString()}`) } return } export default FabricSortClient [V0_FILE]css:file="features/fabric-filters/ui/FabricFilters.module.css" isFixed="true" isQuickEdit="true" isMerged="true" .filtersContainer { background-color: #f8fafc; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: var(--spacing-lg); overflow: hidden; } .filtersHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .filtersTitle { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: #1a202c; } .resultsCount { font-size: var(--font-size-sm); color: var(--text-secondary); } .toggleButton { display: none; align-items: center; gap: var(--spacing-xs); background: none; border: none; color: var(--accent-color); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; } .toggleIcon { transition: transform var(--transition-fast); } .toggleIcon.open { transform: rotate(180deg); } .filtersContent { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); } .filterGroup { margin-bottom: 1.5rem; } .filterGroupTitle { font-size: 1rem; font-weight: 500; margin-bottom: 0.75rem; color: #4a5568; } .filterOptions { display: flex; flex-direction: column; gap: 0.5rem; } .filterOption { display: flex; align-items: center; cursor: pointer; } .filterInput { margin-right: 0.5rem; cursor: pointer; width: 16px; height: 16px; } .filterLabel { font-size: 0.875rem; color: #4a5568; } .filterActions { display: flex; gap: 1rem; margin-top: 1.5rem; } .resetButton { flex: 1; } .applyButton { flex: 1; } .activeFilters { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; } .activeFiltersTitle { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.75rem; color: #4a5568; } .activeFiltersList { display: flex; flex-wrap: wrap; gap: 0.5rem; } .activeFilterTag { display: flex; align-items: center; background-color: #edf2f7; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; color: #4a5568; } .removeFilterButton { background: none; border: none; cursor: pointer; margin-left: 0.25rem; font-size: 1rem; color: #718096; display: flex; align-items: center; justify-content: center; padding: 0; width: 16px; height: 16px; } .removeFilterButton:hover { color: #e53e3e; } .clearAllButton { background: none; border: none; cursor: pointer; font-size: 0.75rem; color: #4299e1; padding: 0.25rem 0.5rem; text-decoration: underline; } .clearAllButton:hover { color: #2b6cb0; } @media (max-width: 768px) { .toggleButton { display: flex; } .filtersContent { display: none; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal), padding var(--transition-normal); } .filtersContent.open { display: flex; padding: var(--spacing-md); max-height: 1000px; } .filtersHeader { flex-wrap: wrap; } .resultsCount { order: 3; width: 100%; margin-top: var(--spacing-sm); } .filtersContainer { padding: 15px; } .filtersTitle { font-size: 1.125rem; margin-bottom: 1rem; } .filterGroupTitle { font-size: 0.875rem; } .filterLabel { font-size: 0.8125rem; } .filterActions { flex-direction: column; gap: 0.5rem; } } [V0_FILE]css:file="app/fabrics/[categoryId]/page.module.css" isFixed="true" isQuickEdit="true" isMerged="true" .title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #1a202c; } .description { font-size: 1rem; color: #4a5568; margin-bottom: 2rem; max-width: 800px; line-height: 1.6; } .content { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; margin-bottom: 3rem; } .sidebar { position: sticky; top: 100px; height: fit-content; } .toolsContainer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .sortComponent { margin-left: auto; } .collectionsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .noCollections { text-align: center; padding: 3rem 0; background-color: #f7fafc; border-radius: 0.5rem; } .noCollections p { font-size: 1.125rem; color: #4a5568; margin-bottom: 1.5rem; } @media (max-width: 1024px) { .content { grid-template-columns: 1fr; } .sidebar { position: static; margin-bottom: 2rem; } } @media (max-width: 768px) { .title { font-size: 1.75rem; } .collectionsGrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } } @media (max-width: 480px) { .title { font-size: 1.5rem; } .collectionsGrid { grid-template-columns: 1fr; gap: 1.25rem; } } [V0_FILE]typescriptreact:file="features/fabric-filters/ui/FabricFiltersClient.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter, usePathname, useSearchParams } from "next/navigation" import Button from "@/shared/ui/button/Button" import styles from "./FabricFilters.module.css" interface FabricFiltersClientProps { collections: string[] types: string[] abrasionResistances: string[] availabilities: string[] className?: string } export const FabricFiltersClient = ({ collections, types, abrasionResistances, availabilities, className = "", }: FabricFiltersClientProps) => { const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() // Получаем начальные значения из URL const initialCollections = searchParams.get("collections")?.split(",") || [] const initialTypes = searchParams.get("types")?.split(",") || [] const initialAbrasion = searchParams.get("abrasion")?.split(",") || [] const initialAvailability = searchParams.get("availability")?.split(",") || [] // Состояние фильтров с начальными значениями из URL const [selectedCollections, setSelectedCollections] = useState(initialCollections) const [selectedTypes, setSelectedTypes] = useState(initialTypes) const [selectedAbrasionResistances, setSelectedAbrasionResistances] = useState(initialAbrasion) const [selectedAvailabilities, setSelectedAvailabilities] = useState(initialAvailability) // Обработчики изменения фильтров const handleCollectionChange = (collection: string, checked: boolean) => { setSelectedCollections((prev) => (checked ? [...prev, collection] : prev.filter((c) => c !== collection))) } const handleTypeChange = (type: string, checked: boolean) => { setSelectedTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type))) } const handleAbrasionChange = (abrasion: string, checked: boolean) => { setSelectedAbrasionResistances((prev) => (checked ? [...prev, abrasion] : prev.filter((a) => a !== abrasion))) } const handleAvailabilityChange = (availability: string, checked: boolean) => { setSelectedAvailabilities((prev) => (checked ? [...prev, availability] : prev.filter((a) => a !== availability))) } // Применение фильтров const applyFilters = () => { const params = new URLSearchParams() if (selectedCollections.length > 0) { params.set("collections", selectedCollections.join(",")) } if (selectedTypes.length > 0) { params.set("types", selectedTypes.join(",")) } if (selectedAbrasionResistances.length > 0) { params.set("abrasion", selectedAbrasionResistances.join(",")) } if (selectedAvailabilities.length > 0) { params.set("availability", selectedAvailabilities.join(",")) } router.push(`${pathname}?${params.toString()}`) } // Сброс фильтров const resetFilters = () => { setSelectedCollections([]) setSelectedTypes([]) setSelectedAbrasionResistances([]) setSelectedAvailabilities([]) router.push(pathname) } return (

Фильтры

{collections.length > 0 && (

Коллекция

{collections.map((collection) => ( handleCollectionChange(collection, e.target.checked)} className={styles.filterInput} /> {collection} ))}

)} {types.length > 0 && (

Тип ткани

{types.map((type) => ( handleTypeChange(type, e.target.checked)} className={styles.filterInput} /> {type} ))}

)} {abrasionResistances.length > 0 && (

Устойчивость к истиранию

{abrasionResistances.map((abrasion) => ( handleAbrasionChange(abrasion, e.target.checked)} className={styles.filterInput} /> {abrasion} ))}

)} {availabilities.length > 0 && (

Наличие

{availabilities.map((availability) => ( handleAvailabilityChange(availability, e.target.checked)} className={styles.filterInput} /> {availability} ))}

)}

) } export default FabricFiltersClient [V0_FILE]typescriptreact:file="features/fabric-filters/ui/FabricFilters.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import FabricFiltersClient from "./FabricFiltersClient" interface FabricFiltersProps { collections: string[] types: string[] abrasionResistances: string[] availabilities: string[] className?: string } export default function FabricFilters(props: FabricFiltersProps) { return } [V0_FILE]typescriptreact:file="widgets/header/ui/Header.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Link from "next/link" import { useCart } from "@/entities/cart/model/cartContext" import { useFavorites } from "@/entities/favorites/model/favoritesContext" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import styles from "./Header.module.css" export const Header = () => { const [isMenuOpen, setIsMenuOpen] = useState(false) const { state: cartState } = useCart() const { state: favoritesState } = useFavorites() const { state: fabricCartState } = useFabricCart() const { state: fabricFavoritesState } = useFabricFavorites() const menuRef = useRef(null) const buttonRef = useRef(null) // Вычисляем общее количество товаров в корзине (мебель + ткани) const totalCartItems = cartState.totalItems + fabricCartState.totalItems // Вычисляем общее количество товаров в избранном (мебель + ткани) const totalFavoriteItems = favoritesState.totalItems + fabricFavoritesState.totalItems const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } // Close menu when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( isMenuOpen && menuRef.current && buttonRef.current && !menuRef.current.contains(event.target as Node) && !buttonRef.current.contains(event.target as Node) ) { setIsMenuOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [isMenuOpen]) // Prevent body scroll when menu is open useEffect(() => { if (isMenuOpen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isMenuOpen]) return (

Dilavia

{ // Close menu only if clicking the overlay, not the menu content if (e.target === menuRef.current) { setIsMenuOpen(false) } }} >

setIsMenuOpen(false)}> Dilavia

setIsMenuOpen(false)}> Каталог
setIsMenuOpen(false)}> Ткани
setIsMenuOpen(false)}> Диваны
setIsMenuOpen(false)}> Кровати
setIsMenuOpen(false)}> О нас
setIsMenuOpen(false)}> Контакты
setIsMenuOpen(false)}> Доставка и оплата

setIsMenuOpen(false)}> Избранное {totalFavoriteItems > 0 && {totalFavoriteItems}} setIsMenuOpen(false)}> Корзина {totalCartItems > 0 && {totalCartItems}}

+375 (29) 123-45-67

{totalFavoriteItems > 0 && {totalFavoriteItems}}

{totalCartItems > 0 && {totalCartItems}}

) } export default Header [V0_FILE]typescriptreact:file="shared/utils/formatPrice.ts" isMerged="true" export const formatPrice = (price?: number): string => { // Проверяем, что цена определена и является числом if (price === undefined || price === null || isNaN(price)) { return "0" } return price.toLocaleString("ru-RU") } [V0_FILE]typescriptreact:file="entities/favorites/model/types.ts" isMerged="true" export interface FavoriteItem { id: string product: { id: string name: string price: number image: string category: string slug: string categoryName: string } } export interface FavoritesState { items: FavoriteItem[] totalItems: number } export type FavoritesAction = | { type: "ADD_TO_FAVORITES"; payload: FavoriteItem } | { type: "REMOVE_FROM_FAVORITES"; payload: string } | { type: "CLEAR_FAVORITES" } [V0_FILE]typescriptreact:file="app/favorites/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { useFavorites } from "@/entities/favorites/model/favoritesContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import ProductCard from "@/entities/product/ui/ProductCard" import FabricCard from "@/entities/fabric/ui/FabricCard" import Button from "@/shared/ui/button/Button" import styles from "./page.module.css" export default function FavoritesPage() { const { state: furnitureFavoritesState, dispatch: furnitureFavoritesDispatch } = useFavorites() const { state: fabricFavoritesState, dispatch: fabricFavoritesDispatch } = useFabricFavorites() const [isClient, setIsClient] = useState(false) const [activeTab, setActiveTab] = useState<"all" | "furniture" | "fabrics">("all") // Fix hydration issues useEffect(() => { setIsClient(true) }, []) if (!isClient) { return null } // Безопасно получаем массивы избранного const furnitureFavorites = furnitureFavoritesState?.items || [] const fabricFavorites = fabricFavoritesState?.items || [] // Проверяем, пуст ли список избранного const isEmptyFavorites = furnitureFavorites.length === 0 && fabricFavorites.length === 0 // Проверяем, есть ли товары в каждой категории const hasFurniture = furnitureFavorites.length > 0 const hasFabrics = fabricFavorites.length > 0 // Определяем, какие товары показывать в зависимости от активного таба const showFurniture = activeTab === "all" || activeTab === "furniture" const showFabrics = activeTab === "all" || activeTab === "fabrics" // Функция для удаления мебели из избранного const removeFromFurnitureFavorites = (id: string) => { furnitureFavoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: id, }) } // Функция для удаления ткани из избранного const removeFromFabricFavorites = (id: string) => { fabricFavoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: id, }) } return (

Избранное

{isEmptyFavorites ? (

У вас нет избранных товаров

Добавьте товары в избранное, чтобы вернуться к ним позже или сравнить

) : (

{/* Табы для переключения между категориями */}

{hasFurniture && ( )} {hasFabrics && ( )}

{/* Секция мебели */} {showFurniture && hasFurniture && (

{activeTab !== "all" &&

Мебель

}

{furnitureFavorites.map((item) => ( ))}

)} {/* Секция тканей */} {showFabrics && hasFabrics && (

{activeTab !== "all" &&

Ткани

}

{fabricFavorites.map((item) => ( ))}

)}

) } [V0_FILE]css:file="app/favorites/page.module.css" isMerged="true" .title { font-size: var(--font-size-3xl); font-weight: 700; margin: var(--spacing-xl) 0; text-align: center; } /* Стили для пустого состояния */ .emptyFavorites { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-3xl) 0; max-width: 600px; margin: 0 auto; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .emptyFavoritesIcon { color: var(--text-secondary); margin-bottom: var(--spacing-lg); opacity: 0.7; } .emptyFavoritesTitle { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-md); color: var(--text-color); } .emptyFavoritesText { color: var(--text-secondary); margin-bottom: var(--spacing-xl); font-size: var(--font-size-md); line-height: 1.5; } .emptyFavoritesActions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; justify-content: center; } /* Стили для контента с избранными товарами */ .favoritesContent { margin-bottom: var(--spacing-3xl); animation: fadeIn 0.5s ease-in-out; } /* Стили для табов */ .favoritesTabs { display: flex; margin-bottom: var(--spacing-xl); border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .favoritesTabs::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .favoritesTab { padding: var(--spacing-md) var(--spacing-lg); background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-size-md); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .favoritesTab:hover { color: var(--text-color); } .favoritesTab.activeTab { color: var(--accent-color); border-bottom-color: var(--accent-color); } /* Стили для секций */ .favoritesSection { margin-bottom: var(--spacing-2xl); } .sectionTitle { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-lg); color: var(--text-color); } /* Сетки для товаров */ .furnitureGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } .fabricsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } /* Адаптивность */ @media (max-width: 768px) { .title { font-size: var(--font-size-2xl); margin: var(--spacing-lg) 0; } .emptyFavoritesTitle { font-size: var(--font-size-lg); } .emptyFavoritesActions { flex-direction: column; width: 100%; } .emptyFavoritesActions a { width: 100%; } .favoritesTabs { padding-bottom: var(--spacing-xs); } .favoritesTab { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); } .sectionTitle { font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); } .furnitureGrid, .fabricsGrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--spacing-md); } } @media (max-width: 480px) { .furnitureGrid, .fabricsGrid { grid-template-columns: 1fr; } } [V0_FILE]typescriptreact:file="app/api/check-product-filters/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getProductsByFilters } from "@/shared/api/api" export async function GET(request: Request) { const { searchParams } = new URL(request.url) // Получаем параметры фильтрации из запроса const category = searchParams.get("category") || "all" const minPrice = searchParams.get("minPrice") ? Number(searchParams.get("minPrice")) : undefined const maxPrice = searchParams.get("maxPrice") ? Number(searchParams.get("maxPrice")) : undefined try { // Получаем товары с учетом фильтров const products = await getProductsByFilters({ category, minPrice, maxPrice, }) return NextResponse.json(products) } catch (error) { console.error("Error filtering products:", error) return NextResponse.json({ error: "Failed to filter products" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/catalog/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { useSearchParams } from "next/navigation" import ProductCard from "@/entities/product/ui/ProductCard" import Button from "@/shared/ui/button/Button" import Input from "@/shared/ui/input/Input" import { getProductsByFilters, getPriceRange, getSortedProducts } from "@/shared/api/api" import type { SofaData, BedData } from "@/shared/api/types" import styles from "./page.module.css" export default function CatalogPage() { const searchParams = useSearchParams() // Get initial filter values from URL const initialCategory = searchParams.get("category") || "all" const initialMinPrice = searchParams.get("minPrice") ? Number(searchParams.get("minPrice")) : undefined const initialMaxPrice = searchParams.get("maxPrice") ? Number(searchParams.get("maxPrice")) : undefined const initialSortBy = searchParams.get("sort") || "popularity" // State for products and filters const [products, setProducts] = useState<(SofaData | BedData)[]>([]) const [loading, setLoading] = useState(true) const [activeCategory, setActiveCategory] = useState(initialCategory) const [priceRange, setPriceRange] = useState<{ min: number; max: number }>({ min: 0, max: 10000 }) const [minPrice, setMinPrice] = useState(initialMinPrice) const [maxPrice, setMaxPrice] = useState(initialMaxPrice) const [sortBy, setSortBy] = useState(initialSortBy) const [isFiltersOpen, setIsFiltersOpen] = useState(false) // Новое состояние для отслеживания изменений фильтров const [pendingCategory, setPendingCategory] = useState(initialCategory) const [pendingMinPrice, setPendingMinPrice] = useState(initialMinPrice) const [pendingMaxPrice, setPendingMaxPrice] = useState(initialMaxPrice) const [filtersChanged, setFiltersChanged] = useState(false) // Добавить новое состояние для хранения количества товаров, соответствующих фильтрам const [filteredCount, setFilteredCount] = useState(null) const filterDrawerRef = useRef(null) const filterOverlayRef = useRef(null) // Load products and filter options useEffect(() => { async function loadData() { setLoading(true) try { // Get price range const range = await getPriceRange() setPriceRange(range) // Set default price range if not specified in URL if (minPrice === undefined) setMinPrice(range.min) if (maxPrice === undefined) setMaxPrice(range.max) // Set pending values if not already set if (pendingMinPrice === undefined) setPendingMinPrice(range.min) if (pendingMaxPrice === undefined) setPendingMaxPrice(range.max) // Load products with filters let filteredProducts = await getProductsByFilters({ category: activeCategory, minPrice: minPrice || range.min, maxPrice: maxPrice || range.max, }) // Sort products filteredProducts = await getSortedProducts(filteredProducts, sortBy) setProducts(filteredProducts) } catch (error) { console.error("Error loading catalog data:", error) } finally { setLoading(false) } } loadData() }, [activeCategory, minPrice, maxPrice, sortBy]) // Update URL with filters without navigating away useEffect(() => { const params = new URLSearchParams(window.location.search) // Update or remove category parameter if (activeCategory !== "all") { params.set("category", activeCategory) } else { params.delete("category") } // Update or remove price parameters if (minPrice !== undefined && minPrice !== priceRange.min) { params.set("minPrice", minPrice.toString()) } else { params.delete("minPrice") } if (maxPrice !== undefined && maxPrice !== priceRange.max) { params.set("maxPrice", maxPrice.toString()) } else { params.delete("maxPrice") } // Update or remove sort parameter if (sortBy !== "popularity") { params.set("sort", sortBy) } else { params.delete("sort") } // Update URL without refreshing the page using history API const newUrl = params.toString() ? `?${params.toString()}` : window.location.pathname window.history.replaceState({}, "", newUrl) }, [activeCategory, minPrice, maxPrice, priceRange, sortBy]) // Close drawer when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( isFiltersOpen && filterDrawerRef.current && filterOverlayRef.current && event.target === filterOverlayRef.current ) { setIsFiltersOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [isFiltersOpen]) // Lock body scroll when drawer is open useEffect(() => { if (isFiltersOpen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isFiltersOpen]) // Добавить функцию для предварительной проверки количества товаров const checkFilteredCount = async () => { try { const params = new URLSearchParams() if (pendingCategory !== "all") { params.set("category", pendingCategory) } if (pendingMinPrice !== undefined) { params.set("minPrice", pendingMinPrice.toString()) } if (pendingMaxPrice !== undefined) { params.set("maxPrice", pendingMaxPrice.toString()) } const filteredProducts = await fetch(`/api/check-product-filters?${params.toString()}`).then((res) => res.json()) setFilteredCount(filteredProducts.length) } catch (error) { console.error("Error checking filtered count:", error) setFilteredCount(null) } } // Добавить вызов функции при изменении фильтров useEffect(() => { if (filtersChanged) { checkFilteredCount() } else { setFilteredCount(null) } }, [pendingCategory, pendingMinPrice, pendingMaxPrice, filtersChanged]) // Изменить обработчики изменения фильтров, чтобы сбрасывать filteredCount // Обработчик изменения категории - теперь только обновляет временное состояние const handleCategoryChange = (category: string) => { setPendingCategory(category) setFiltersChanged(true) } // Обработчики изменения цены - теперь только обновляют временное состояние const handleMinPriceChange = (e: React.ChangeEvent) => { const value = e.target.value ? Number(e.target.value) : undefined setPendingMinPrice(value) setFiltersChanged(true) } const handleMaxPriceChange = (e: React.ChangeEvent) => { const value = e.target.value ? Number(e.target.value) : undefined setPendingMaxPrice(value) setFiltersChanged(true) } // Новый обработчик для применения фильтров const applyFilters = () => { setActiveCategory(pendingCategory) setMinPrice(pendingMinPrice) setMaxPrice(pendingMaxPrice) setFiltersChanged(false) setIsFiltersOpen(false) } const handleSortChange = (e: React.ChangeEvent) => { setSortBy(e.target.value) } const handleResetFilters = () => { setPendingCategory("all") setPendingMinPrice(priceRange.min) setPendingMaxPrice(priceRange.max) setFiltersChanged(true) } const toggleFilters = () => { setIsFiltersOpen(!isFiltersOpen) // При открытии фильтров, синхронизируем временное состояние с текущим if (!isFiltersOpen) { setPendingCategory(activeCategory) setPendingMinPrice(minPrice) setPendingMaxPrice(maxPrice) setFiltersChanged(false) } } return (

Каталог мебели

Сортировать:

{/* Filter Drawer Overlay */}

setIsFiltersOpen(false)} >

{/* Filter Drawer */}

Фильтры

Цена

{!loading && Найдено товаров: {products.length}}

{loading ? (

Загрузка товаров...

) : products.length > 0 ? (

{products.map((product) => ( ))}

) : (

По вашему запросу ничего не найдено.

Попробуйте изменить параметры фильтрации.

)}

) } [V0_FILE]typescriptreact:file="app/api/check-fabric-filters/route.ts" isMerged="true" import { NextResponse } from "next/server" import { filterFabricCollections } from "@/shared/api/fabric-api" export async function GET(request: Request) { const { searchParams } = new URL(request.url) const categoryName = searchParams.get("category") if (!categoryName) { return NextResponse.json({ error: "Category name is required" }, { status: 400 }) } // Получаем параметры фильтрации из запроса const collectionsFilter = searchParams.get("collections") ? searchParams.get("collections")!.split(",") : undefined const typesFilter = searchParams.get("types") ? searchParams.get("types")!.split(",") : undefined const minAbrasionFilter = searchParams.get("minAbrasion") ? Number(searchParams.get("minAbrasion")) : undefined const maxAbrasionFilter = searchParams.get("maxAbrasion") ? Number(searchParams.get("maxAbrasion")) : undefined const availabilityFilter = searchParams.get("availability") ? searchParams.get("availability")!.split(",") : undefined try { // Получаем коллекции с учетом фильтров const collections = await filterFabricCollections(categoryName, { collections: collectionsFilter, types: typesFilter, minAbrasion: minAbrasionFilter, maxAbrasion: maxAbrasionFilter, availability: availabilityFilter, }) return NextResponse.json(collections) } catch (error) { console.error("Error filtering fabric collections:", error) return NextResponse.json({ error: "Failed to filter collections" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="features/fabric-filters/ui/FabricFiltersDrawer.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { useRouter, usePathname, useSearchParams } from "next/navigation" import Button from "@/shared/ui/button/Button" import Input from "@/shared/ui/input/Input" import styles from "./FabricFiltersDrawer.module.css" interface FabricFiltersDrawerProps { collections?: string[] types?: string[] availabilities?: string[] categoryId?: string className?: string } export const FabricFiltersDrawer = ({ collections = [], types = [], availabilities = [], categoryId, className = "", }: FabricFiltersDrawerProps) => { const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() const [isOpen, setIsOpen] = useState(false) const drawerRef = useRef(null) const overlayRef = useRef(null) // Получаем начальные значения из URL const initialCollections = searchParams.get("collections")?.split(",") || [] const initialTypes = searchParams.get("types")?.split(",") || [] const initialMinAbrasion = searchParams.get("minAbrasion") ? Number(searchParams.get("minAbrasion")) : 0 const initialMaxAbrasion = searchParams.get("maxAbrasion") ? Number(searchParams.get("maxAbrasion")) : 100000 const initialAvailabilities = searchParams.get("availability")?.split(",") || [] // Состояние фильтров const [selectedCollections, setSelectedCollections] = useState(initialCollections) const [selectedTypes, setSelectedTypes] = useState(initialTypes) const [minAbrasion, setMinAbrasion] = useState(initialMinAbrasion) const [maxAbrasion, setMaxAbrasion] = useState(initialMaxAbrasion) const [selectedAvailabilities, setSelectedAvailabilities] = useState(initialAvailabilities) const [filtersChanged, setFiltersChanged] = useState(false) // Добавить новое состояние для хранения количества коллекций, соответствующих фильтрам const [filteredCount, setFilteredCount] = useState(null) const [isLoading, setIsLoading] = useState(false) // Закрытие drawer при клике вне его области useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (isOpen && drawerRef.current && overlayRef.current && event.target === overlayRef.current) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [isOpen]) // Блокировка прокрутки body при открытом drawer useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isOpen]) // Обработчики изменения фильтров const handleCollectionChange = (collection: string, checked: boolean) => { setSelectedCollections((prev) => { const newValue = checked ? [...prev, collection] : prev.filter((c) => c !== collection) setFiltersChanged(true) return newValue }) } const handleTypeChange = (type: string, checked: boolean) => { setSelectedTypes((prev) => { const newValue = checked ? [...prev, type] : prev.filter((t) => t !== type) setFiltersChanged(true) return newValue }) } const handleMinAbrasionChange = (e: React.ChangeEvent) => { const value = e.target.value ? Number(e.target.value) : 0 setMinAbrasion(value) setFiltersChanged(true) } const handleMaxAbrasionChange = (e: React.ChangeEvent) => { const value = e.target.value ? Number(e.target.value) : 100000 setMaxAbrasion(value) setFiltersChanged(true) } const handleAvailabilityChange = (availability: string, checked: boolean) => { setSelectedAvailabilities((prev) => { const newValue = checked ? [...prev, availability] : prev.filter((a) => a !== availability) setFiltersChanged(true) return newValue }) } // Определение категории из URL или пропса const getCategoryFromPath = (): string | null => { // Если категория передана как проп, используем её if (categoryId) { return categoryId } // Иначе пытаемся извлечь из URL try { const pathParts = pathname.split("/") // URL может быть /fabrics/[categoryId] или /fabrics/[categoryId]/[collectionId] if (pathParts.length >= 3 && pathParts[1] === "fabrics") { return pathParts[2] } } catch (error) { console.error("Error extracting category from path:", error) } return null } // Добавить функцию для предварительной проверки количества коллекций const checkFilteredCount = async () => { try { setIsLoading(true) // Получаем категорию const category = getCategoryFromPath() if (!category) { console.error("Category not found") setFilteredCount(null) setIsLoading(false) return } const params = new URLSearchParams() if (selectedCollections.length > 0) { params.set("collections", selectedCollections.join(",")) } if (selectedTypes.length > 0) { params.set("types", selectedTypes.join(",")) } if (minAbrasion > 0) { params.set("minAbrasion", minAbrasion.toString()) } if (maxAbrasion < 100000) { params.set("maxAbrasion", maxAbrasion.toString()) } if (selectedAvailabilities.length > 0) { params.set("availability", selectedAvailabilities.join(",")) } // Вызываем API для получения отфильтрованных коллекций const response = await fetch(`/api/check-fabric-filters?category=${category}&${params.toString()}`) if (!response.ok) { throw new Error(`API request failed with status ${response.status}`) } const data = await response.json() // Проверяем, что data - это массив if (Array.isArray(data)) { setFilteredCount(data.length) } else if (data && typeof data === "object" && data.error) { console.error("API returned error:", data.error) setFilteredCount(null) } else { console.error("API response is not an array:", data) setFilteredCount(null) } } catch (error) { console.error("Error checking filtered count:", error) setFilteredCount(null) } finally { setIsLoading(false) } } // Добавить вызов функции при изменении фильтров useEffect(() => { if (filtersChanged) { const timer = setTimeout(() => { checkFilteredCount() }, 300) // Добавляем небольшую задержку для дебаунсинга return () => clearTimeout(timer) } else { setFilteredCount(null) } }, [selectedCollections, selectedTypes, minAbrasion, maxAbrasion, selectedAvailabilities, filtersChanged, pathname]) // Применение фильтров const applyFilters = () => { const params = new URLSearchParams() if (selectedCollections.length > 0) { params.set("collections", selectedCollections.join(",")) } if (selectedTypes.length > 0) { params.set("types", selectedTypes.join(",")) } if (minAbrasion > 0) { params.set("minAbrasion", minAbrasion.toString()) } if (maxAbrasion < 100000) { params.set("maxAbrasion", maxAbrasion.toString()) } if (selectedAvailabilities.length > 0) { params.set("availability", selectedAvailabilities.join(",")) } router.push(`${pathname}?${params.toString()}`) setIsOpen(false) setFiltersChanged(false) } // Сброс фильтров const resetFilters = () => { setSelectedCollections([]) setSelectedTypes([]) setMinAbrasion(0) setMaxAbrasion(100000) setSelectedAvailabilities([]) setFiltersChanged(true) } // Переключение состояния drawer const toggleDrawer = () => { setIsOpen(!isOpen) // При открытии фильтров, сбрасываем флаг изменений if (!isOpen) { setFiltersChanged(false) } } // Проверяем, есть ли хоть один фильтр для отображения const hasFilters = (collections && collections.length > 0) || (types && types.length > 0) || (availabilities && availabilities.length > 0) if (!hasFilters) { // Если нет фильтров для отображения, возвращаем пустой фрагмент или упрощенную версию return (

) } return (

{/* Overlay */}

setIsOpen(false)} >

{/* Drawer */}

Фильтры

{collections && collections.length > 0 && (

Коллекция

{collections.map((collection) => ( handleCollectionChange(collection, e.target.checked)} className={styles.filterInput} /> {collection} ))}

)} {types && types.length > 0 && (

Тип ткани

{types.map((type) => ( handleTypeChange(type, e.target.checked)} className={styles.filterInput} /> {type} ))}

)}

Устойчивость к истиранию (циклов)

От:

До:

{availabilities && availabilities.length > 0 && (

Наличие

{availabilities.map((availability) => ( handleAvailabilityChange(availability, e.target.checked)} className={styles.filterInput} /> {availability} ))}

)}

) } export default FabricFiltersDrawer [V0_FILE]css:file="features/fabric-filters/ui/FabricFiltersDrawer.module.css" isMerged="true" .filtersContainer { position: relative; z-index: 100; } .filtersHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .filterButton { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; font-weight: 600; font-size: 0.95rem; color: #4a60a1; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .filterButton:hover { background-color: #f1f3f5; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } .filterButton svg { color: #4a60a1; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; left: -100%; width: 320px; max-width: 90%; height: 100%; background-color: white; z-index: 1000; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); transition: left 0.3s ease; overflow-y: auto; } .drawer.open { left: 0; } .drawerHeader { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid #e9ecef; } .drawerTitle { font-size: 1.25rem; font-weight: 600; margin: 0; color: #212529; } .closeButton { background: none; border: none; cursor: pointer; color: #6c757d; padding: 0.25rem; border-radius: 4px; transition: background-color 0.2s ease; } .closeButton:hover { background-color: #f8f9fa; color: #212529; } .drawerContent { padding: 1.25rem; } .filterGroup { margin-bottom: 1.5rem; } .filterGroupTitle { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem 0; color: #343a40; } .filterOptions { display: flex; flex-direction: column; gap: 0.5rem; } .filterOption { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .filterInput { margin: 0; } .filterLabel { font-size: 0.95rem; color: #495057; } .colorOptions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .colorOption { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } .colorOption:hover { background-color: #f8f9fa; } .colorOption.selected { background-color: #e9ecef; } .colorLabel { font-size: 0.95rem; color: #495057; } .abrasionInputs { display: flex; gap: 1rem; margin-top: 0.5rem; } .abrasionInputGroup { flex: 1; } .abrasionLabel { display: block; margin-bottom: 0.25rem; font-size: 0.85rem; color: #6c757d; } .abrasionInput { width: 100%; } .filterActions { display: flex; gap: 1rem; margin-top: 2rem; } .resetButton, .applyButton { flex: 1; } .activeFilters { margin-top: 1rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px; } .activeFiltersTitle { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; color: #495057; } .activeFiltersList { display: flex; flex-wrap: wrap; gap: 0.5rem; } .activeFilterTag { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: #e9ecef; border-radius: 4px; font-size: 0.85rem; color: #495057; } .removeFilterButton { background: none; border: none; cursor: pointer; color: #6c757d; font-size: 1rem; padding: 0; margin-left: 0.25rem; } .clearAllButton { background: none; border: none; cursor: pointer; color: #4a60a1; font-size: 0.85rem; padding: 0; text-decoration: underline; margin-left: 0.5rem; } .resultsCount { font-size: 0.9rem; color: #6c757d; } @media (max-width: 768px) { .drawer { width: 280px; } .filterActions { flex-direction: column; gap: 0.5rem; } } [V0_FILE]typescriptreact:file="app/fabrics/[categoryId]/[collectionId]/FabricCollectionClient.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import Button from "@/shared/ui/button/Button" import type { FabricCategory, FabricCollection, FabricVariant } from "@/shared/api/types" import styles from "./FabricCollectionClient.module.css" interface FabricCollectionClientProps { category: FabricCategory collection: FabricCollection categoryId: string collectionId: string } export default function FabricCollectionClient({ category, collection, categoryId, collectionId, }: FabricCollectionClientProps) { const { state: cartState, dispatch: cartDispatch } = useFabricCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFabricFavorites() const [activeTab, setActiveTab] = useState<"description" | "specifications" | "care">("description") // Проверка наличия варианта в корзине и избранном const isInCart = (variantId: number) => { const id = `${categoryId}-${collectionId}-${variantId}` return cartState.items.some((item) => item.id === id) } const isInFavorites = (variantId: number) => { const id = `${categoryId}-${collectionId}-${variantId}` return favoritesState.items.some((item) => item.id === id) } // Обработчики добавления в корзину и избранное const handleAddToCart = (variant: FabricVariant) => { const variantId = `${categoryId}-${collectionId}-${variant.id}` if (isInCart(variant.id)) return cartDispatch({ type: "ADD_TO_CART", payload: { id: variantId, categoryName: categoryId, categoryNameRu: category.name_ru, collectionName: collectionId, collectionNameRu: collection.name_ru, variant, quantity: 1, price: 1200, // Фиксированная цена для примера }, }) } const handleToggleFavorite = (variant: FabricVariant) => { const variantId = `${categoryId}-${collectionId}-${variant.id}` if (isInFavorites(variant.id)) { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: variantId, }) } else { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: variantId, categoryName: categoryId, categoryNameRu: category.name_ru, collectionName: collectionId, collectionNameRu: collection.name_ru, variant, }, }) } } return (

{collection.name_ru}

{collection.availability}

Доступные цвета

{collection.variants.map((variant) => (

{variant.color.ru}

1200 ₽/м

))}

{activeTab === "description" && (

{collection.description_ru ? (

{collection.description_ru}

) : (

Коллекция {collection.name_ru} из категории {category.name_ru}. Идеально подходит для обивки мебели и создания уютного интерьера.

)}

)} {activeTab === "specifications" && (

Технические характеристики

{collection.technicalSpecifications && ( <> {collection.technicalSpecifications.fabricType && ( )} {collection.technicalSpecifications.abrasionResistance && ( )} {collection.technicalSpecifications.density && ( )} {collection.technicalSpecifications.composition_ru && ( )} {collection.technicalSpecifications.width && ( )} {collection.technicalSpecifications.origin_ru && ( )} {collection.technicalSpecifications.directionality_ru && ( )} )}

Тип ткани:	{collection.technicalSpecifications.fabricType}
Устойчивость к истиранию:	{collection.technicalSpecifications.abrasionResistance} циклов
Плотность:	{collection.technicalSpecifications.density}
Состав:	{collection.technicalSpecifications.composition_ru}
Ширина:	{collection.technicalSpecifications.width}
Страна производства:	{collection.technicalSpecifications.origin_ru}
Направленность:	{collection.technicalSpecifications.directionality_ru}

)} {activeTab === "care" && (

Инструкции по уходу

{collection.careInstructions_ru && collection.careInstructions_ru.length > 0 ? (

{instruction}

) : (

Информация по уходу не предоставлена.

)}

) } [V0_FILE]css:file="app/fabrics/[categoryId]/[collectionId]/FabricCollectionClient.module.css" isMerged="true" .container { padding: 2rem 0; } .header { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.5rem; } .title { font-size: 2rem; font-weight: 700; margin: 0; } .availability { font-size: 1rem; color: #4caf50; font-weight: 500; } .content { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .content { grid-template-columns: 1fr; } } @media (min-width: 1024px) { .content { grid-template-columns: 3fr 2fr; } } .variantsSection { margin-bottom: 2rem; } .sectionTitle { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .variantsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .variantCard { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s; } .variantCard:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .imageContainer { position: relative; height: 250px; overflow: hidden; } .variantImage { width: 100%; height: 100%; object-fit: cover; } .variantActions { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; justify-content: space-between; opacity: 0; transition: opacity 0.2s; } .imageContainer:hover .variantActions { opacity: 1; } .actionButton { flex: 1; margin-right: 0.5rem; } .favoriteButton { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; } .favoriteActive { color: #e53e3e; border-color: #e53e3e; } .variantInfo { padding: 1rem; } .variantTitle { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem 0; } .variantPrice { font-size: 1rem; font-weight: 500; color: #333; margin: 0; } .detailsSection { background-color: #f9f9f9; border-radius: 8px; padding: 1.5rem; } .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 1.5rem; } .tab { padding: 0.75rem 1.5rem; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: #666; transition: color 0.2s; } .tab:hover { color: #333; } .activeTab { color: #000; border-bottom: 2px solid #000; } .tabContent { min-height: 200px; } .description p { line-height: 1.6; color: #333; } .specTable { width: 100%; border-collapse: collapse; } .specTable td { padding: 0.75rem 0; border-bottom: 1px solid #eee; } .specTable td:first-child { font-weight: 500; width: 40%; } .careList { list-style-type: disc; padding-left: 1.5rem; } .careList li { margin-bottom: 0.5rem; line-height: 1.5; } [V0_FILE]typescriptreact:file="shared/api/fabric-api.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { FabricCategory, FabricCollection, FabricVariant } from "./types" const API_BASE_URL = "https://66d77b122c6b09c7.mokky.dev" // Fallback data in case the API is unavailable const FALLBACK_DATA = [ { categories: [ { name: "Chenille", name_ru: "Шенилл", description_ru: "Плотная ткань с бархатистой текстурой и матовым блеском, идеально подходит для обивки мебели.", collections: [ { name: "Mirax", name_ru: "Миракс", type: "Велюр с шинильной нитью", availability: "В наличии", technicalSpecifications: { fabricType: "Шенилл", abrasionResistance: "100000", density: "430 g/m²", composition: "100% Polyester", composition_ru: "Полиэстер - 100%", width: "140 ± 2 cm", origin: "China", origin_ru: "Китай", collectionName: "Mirax", directionality: "No direction", directionality_ru: "Нет направленности", applicationAreas_ru: ["Диваны", "Кровати", "Кресла", "Панели", "Стулья", "Шторы"], }, careInstructions_ru: [ "Сухая чистка", "Сухая уборка пылесосом с мягкой щеткой", "Влажная чистка", "Влажная чистка мылом и х/б тканью", "Беречь от прямых лучей", "Беречь от прямых солнечных лучей", "Без абразивных средств", "Не использовать абразивные средства", "Не использовать отбеливатель", "Бережная стирка", "Бережная стирка при 30C", ], variants: [ { id: 1, color: { en: "Light Grey", ru: "Светло-серый", }, image: "images/chenille/mirax/light_grey.jpg", }, { id: 2, color: { en: "Olive", ru: "Оливковый", }, image: "images/chenille/mirax/olive.jpg", }, ], }, { name: "Palermo", name_ru: "Палермо", type: "Шенилл", availability: "В наличии", technicalSpecifications: { fabricType: "Шенилл", abrasionResistance: "85000", density: "400 g/m²", composition: "95% Polyester, 5% Viscose", composition_ru: "Полиэстер - 95%, Вискоза - 5%", width: "140 cm", origin: "Turkey", origin_ru: "Турция", collectionName: "Palermo", directionality: "No direction", directionality_ru: "Нет направленности", }, careInstructions_ru: [ "Сухая чистка", "Сухая уборка пылесосом с мягкой щеткой", "Влажная чистка", "Влажная чистка мылом и х/б тканью", "Беречь от прямых лучей", "Беречь от прямых солнечных лучей", "Без абразивных средств", "Не использовать абразивные средства", "Не использовать отбеливатель", "Бережная стирка", "Бережная стирка при 30C", ], variants: [ { id: 1, color: { en: "Taupe", ru: "Топ", }, image: "images/chenille/palermo/taupe.jpg", }, ], }, ], }, { name: "Velvet", name_ru: "Велюр", collections: [ { name: "Velvet Classic", name_ru: "Классический Велюр", type: "Велюр", availability: "В наличии", description_ru: "Мягкий велюр, подходящий для классической мебели.", technicalSpecifications: { fabricType: "Велюр", abrasionResistance: "95000", density: "450 g/m²", composition: "100% Polyester", composition_ru: "Полиэстер - 100%", width: "140 cm", origin: "Belgium", origin_ru: "Бельгия", collectionName: "Velvet Classic", directionality: "No direction", directionality_ru: "Нет направленности", }, careInstructions_ru: [ "Сухая чистка", "Сухая уборка пылесосом с мягкой щеткой", "Влажная чистка", "Влажная чистка мылом и х/б тканью", "Беречь от прямых лучей", "Беречь от прямых солнечных лучей", "Без абразивных средств", "Не использовать абразивные средства", "Не использовать отбеливатель", "Бережная стирка", "Бережная стирка при 30C", ], variants: [ { id: 1, color: { en: "Dark Blue", ru: "Темно-синий", }, image: "images/velvet/classic/dark_blue.jpg", }, ], }, ], }, ], }, ] /** * Получение всех категорий тканей */ export async function getFabricCategories(): Promise { try { // Try to fetch from API first const response = await fetch(`${API_BASE_URL}/craft`, { cache: "no-store", // Disable caching to ensure fresh data next: { revalidate: 3600 }, // Revalidate every hour }) if (!response.ok) { throw new Error(`API responded with status: ${response.status}`) } const data = await response.json() return data[0].categories || [] } catch (error) { console.error("Error fetching fabric categories:", error) console.log("Using fallback data instead") // Use fallback data if API fetch fails return FALLBACK_DATA[0].categories || [] } } /** * Получение категории тканей по имени */ export async function getFabricCategoryByName(categoryName: string): Promise { try { const categories = await getFabricCategories() const category = categories.find((category) => category.name.toLowerCase() === categoryName.toLowerCase()) return category || null } catch (error) { console.error(`Error fetching fabric category ${categoryName}:`, error) return null } } /** * Получение коллекции тканей по имени категории и коллекции */ export async function getFabricCollection( categoryName: string, collectionName: string, ): Promise { try { const category = await getFabricCategoryByName(categoryName) if (!category) return null // Decode URL-encoded collection name and normalize for comparison const decodedCollectionName = decodeURIComponent(collectionName) const collection = category.collections.find( (collection) => collection.name.toLowerCase() === decodedCollectionName.toLowerCase() || collection.name_ru.toLowerCase() === decodedCollectionName.toLowerCase(), ) return collection || null } catch (error) { console.error(`Error fetching fabric collection ${collectionName}:`, error) return null } } /** * Фильтрация коллекций тканей по различным параметрам */ export async function filterFabricCollections( categoryName: string, filters: { collections?: string[] types?: string[] minAbrasion?: number maxAbrasion?: number availability?: string[] }, ): Promise { try { const category = await getFabricCategoryByName(categoryName) if (!category) return [] let filteredCollections = [...category.collections] // Фильтрация по названию коллекции if (filters.collections && filters.collections.length > 0) { filteredCollections = filteredCollections.filter((collection) => filters.collections!.some((name) => collection.name_ru.toLowerCase().includes(name.toLowerCase())), ) } // Фильтрация по типу ткани if (filters.types && filters.types.length > 0) { filteredCollections = filteredCollections.filter((collection) => filters.types!.some((type) => collection.type.toLowerCase().includes(type.toLowerCase())), ) } // Фильтрация по устойчивости к истиранию if (filters.minAbrasion !== undefined || filters.maxAbrasion !== undefined) { filteredCollections = filteredCollections.filter((collection) => { // Получаем числовое значение устойчивости к истиранию const abrasionText = collection.technicalSpecifications?.abrasionResistance || "0" const abrasionValue = Number.parseInt(abrasionText.replace(/\D/g, "")) || 0 // Проверяем минимальное значение, если оно задано if (filters.minAbrasion !== undefined && abrasionValue < filters.minAbrasion) { return false } // Проверяем максимальное значение, если оно задано if (filters.maxAbrasion !== undefined && abrasionValue > filters.maxAbrasion) { return false } return true }) } // Фильтрация по наличию if (filters.availability && filters.availability.length > 0) { filteredCollections = filteredCollections.filter((collection) => filters.availability!.some((availability) => collection.availability.toLowerCase().includes(availability.toLowerCase()), ), ) } return filteredCollections } catch (error) { console.error("Error filtering fabric collections:", error) return [] } } /** * Получение всех уникальных названий коллекций для категории */ export async function getFabricCollectionNames(categoryName: string): Promise { try { const category = await getFabricCategoryByName(categoryName) if (!category) return [] return category.collections.map((collection) => collection.name_ru) } catch (error) { console.error("Error fetching fabric collection names:", error) return [] } } /** * Получение всех уникальных типов тканей для категории */ export async function getFabricTypes(categoryName: string): Promise { try { const category = await getFabricCategoryByName(categoryName) if (!category) return [] const types = new Set() category.collections.forEach((collection) => { if (collection.type) { types.add(collection.type) } }) return Array.from(types) } catch (error) { console.error("Error fetching fabric types:", error) return [] } } /** * Получение всех уникальных значений наличия для категории */ export async function getFabricAvailabilities(categoryName: string): Promise { try { const category = await getFabricCategoryByName(categoryName) if (!category) return [] const availabilities = new Set() category.collections.forEach((collection) => { if (collection.availability) { availabilities.add(collection.availability) } }) return Array.from(availabilities) } catch (error) { console.error("Error fetching fabric availabilities:", error) return [] } } /** * Получение варианта ткани по ID */ export async function getFabricVariantById( categoryName: string, collectionName: string, variantId: number, ): Promise { try { const collection = await getFabricCollection(categoryName, collectionName) if (!collection) return null return collection.variants.find((variant) => variant.id === variantId) || null } catch (error) { console.error(`Error fetching fabric variant ${variantId}:`, error) return null } } export async function getAllFabricCollections(categoryId: string) { try { const categories = await getFabricCategories() const category = categories.find((cat) => cat.name.toLowerCase() === categoryId.toLowerCase()) if (!category || !category.collections) { return [] } return category.collections } catch (error) { console.error("Error fetching all fabric collections:", error) return [] } } [V0_FILE]typescriptreact:file="entities/fabric/ui/FabricCollectionCard.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import type { FabricCollection } from "@/shared/api/types" import styles from "./FabricCollectionCard.module.css" interface FabricCollectionCardProps { categoryName: string // Changed from category object to just the category name collection: FabricCollection className?: string } export const FabricCollectionCard = ({ categoryName, collection, className = "" }: FabricCollectionCardProps) => { const [isHovered, setIsHovered] = useState(false) // Safely access collection properties with fallbacks const collectionNameRu = collection?.name_ru || "Коллекция" const collectionName = collection?.name || "" const collectionType = collection?.type || "" const collectionAvailability = collection?.availability || "" // Get the first variant image as the collection thumbnail const thumbnailImage = collection?.variants && collection.variants.length > 0 ? collection.variants[0].image : `/placeholder.svg?height=300&width=300&query=${collectionNameRu}%20fabric` return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

Посмотреть детали

{collectionNameRu}

{collectionType}

{collectionAvailability}

) } export default FabricCollectionCard [V0_FILE]typescriptreact:file="app/fabrics/[categoryId]/page.tsx" isMerged="true" import type { Metadata } from "next" import { notFound } from "next/navigation" import { getFabricCategoryByName, filterFabricCollections, getFabricTypes, getFabricCollectionNames, getFabricAvailabilities, } from "@/shared/api/fabric-api" import FabricCollectionCard from "@/entities/fabric/ui/FabricCollectionCard" import FabricFiltersDrawer from "@/features/fabric-filters/ui/FabricFiltersDrawer" import Breadcrumbs from "@/shared/ui/breadcrumbs/Breadcrumbs" import styles from "./page.module.css" interface FabricCategoryPageProps { params: { categoryId: string } searchParams: { collections?: string types?: string minAbrasion?: string maxAbrasion?: string availability?: string } } export async function generateMetadata({ params }: FabricCategoryPageProps): Promise { const category = await getFabricCategoryByName(params.categoryId) if (!category) { return { title: "Категория не найдена", description: "Запрашиваемая категория тканей не найдена", } } return { title: `${category.name_ru} - Ткани для мебели`, description: category.description_ru || `Коллекции тканей ${category.name_ru} для мебели`, } } export default async function FabricCategoryPage({ params, searchParams }: FabricCategoryPageProps) { const category = await getFabricCategoryByName(params.categoryId) if (!category) { notFound() } // Получаем уникальные значения для фильтров const collectionNames = await getFabricCollectionNames(params.categoryId) const types = await getFabricTypes(params.categoryId) const availabilities = await getFabricAvailabilities(params.categoryId) // Преобразуем параметры запроса в массивы для фильтрации const collectionsFilter = searchParams.collections ? searchParams.collections.split(",") : undefined const typesFilter = searchParams.types ? searchParams.types.split(",") : undefined const minAbrasionFilter = searchParams.minAbrasion ? Number(searchParams.minAbrasion) : undefined const maxAbrasionFilter = searchParams.maxAbrasion ? Number(searchParams.maxAbrasion) : undefined const availabilityFilter = searchParams.availability ? searchParams.availability.split(",") : undefined // Получаем коллекции с учетом фильтров const collections = await filterFabricCollections(params.categoryId, { collections: collectionsFilter, types: typesFilter, minAbrasion: minAbrasionFilter, maxAbrasion: maxAbrasionFilter, availability: availabilityFilter, }) // Формируем хлебные крошки const breadcrumbItems = [ { label: "Главная", href: "/" }, { label: "Ткани", href: "/fabrics" }, { label: category.name_ru, href: `/fabrics/${params.categoryId}`, isCurrent: true }, ] return (

{category.name_ru}

{category.description_ru &&

{category.description_ru}

}

Найдено: {collections.length}

{collections.length > 0 ? (

{collections.map((collection) => ( ))}

) : (

По вашему запросу ничего не найдено. Попробуйте изменить параметры фильтрации.

)}

) } [V0_FILE]css:file="entities/fabric/ui/FabricCollectionCard.module.css" isMerged="true" .card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #fff; height: 100%; text-decoration: none; color: inherit; } .card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .imageContainer { position: relative; width: 100%; height: 220px; overflow: hidden; } .image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .image { transform: scale(1.05); } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .overlay.visible, .card:hover .overlay { opacity: 1; } .viewDetails { color: white; background-color: rgba(0, 0, 0, 0.7); padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; } .content { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; } .title { font-size: 18px; font-weight: 600; margin: 0 0 8px 0; color: #333; } .category { font-size: 14px; color: #666; margin-bottom: 4px; } .type { font-size: 14px; color: #666; margin-bottom: 8px; } .availability { font-size: 14px; font-weight: 500; color: #4caf50; margin-top: auto; } .variantsPreview { display: flex; gap: 6px; margin-top: 12px; margin-bottom: 8px; } .variantPreview { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 1px solid #e0e0e0; } .variantImage { width: 100%; height: 100%; object-fit: cover; } .moreVariants { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #f5f5f5; font-size: 12px; color: #666; } .origin { font-size: 13px; color: #888; margin-top: 8px; } [V0_FILE]png:file="public/assorted-fabrics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/assorted-fabrics-Q668F1xeYk9vgdBFnyO5z68PtZSJHM.png" isMerged="true" [V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState, useCallback } from "react" import Image from "next/image" import Link from "next/link" import { useRouter } from "next/navigation" import Button from "@/shared/ui/button/Button" import Input from "@/shared/ui/input/Input" import { useCart } from "@/entities/cart/model/cartContext" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import styles from "./page.module.css" // Mock promo codes for demonstration const PROMO_CODES = { МЕБЕЛЬ15: { discount: 0.15, description: "Скидка 15% на весь заказ" }, ДИВАН10: { discount: 0.1, description: "Скидка 10% на весь заказ" }, ДОСТАВКА: { discount: 0, freeShipping: true, description: "Бесплатная доставка" }, } // Delivery methods const DELIVERY_METHODS = [ { id: "courier", name: "Курьерская доставка", price: 300 }, { id: "pickup", name: "Самовывоз", price: 0 }, { id: "express", name: "Экспресс-доставка (1-2 дня)", price: 500 }, ] // Payment methods const PAYMENT_METHODS = [ { id: "cash", name: "Наличными при получении" }, { id: "card", name: "Банковской картой" }, { id: "online", name: "Онлайн на сайте" }, { id: "installment", name: "Рассрочка" }, { id: "credit", name: "Кредит" }, ] // Social media options const SOCIAL_MEDIA = [ { id: "telegram", name: "Telegram" }, { id: "viber", name: "Viber" }, { id: "whatsapp", name: "WhatsApp" }, { id: "vk", name: "ВКонтакте" }, ] export default function CartPage() { const router = useRouter() const { state: furnitureCartState, dispatch: furnitureCartDispatch } = useCart() const { state: fabricCartState, dispatch: fabricCartDispatch } = useFabricCart() const [isClient, setIsClient] = useState(false) const [promoCode, setPromoCode] = useState("") const [appliedPromo, setAppliedPromo] = useState(null) const [promoError, setPromoError] = useState(null) const [promoSuccess, setPromoSuccess] = useState(null) const [shippingCost, setShippingCost] = useState(300) // Default shipping cost const [orderSuccess, setOrderSuccess] = useState(false) const [showCheckoutForm, setShowCheckoutForm] = useState(false) const [formErrors, setFormErrors] = useState>({}) // Form data const [formData, setFormData] = useState({ fullName: "", phone: "", deliveryMethod: "courier", address: "", city: "", socialMedia: "telegram", socialMediaUsername: "", paymentMethod: "card", }) // Функция для отображения полноразмерного изображения ткани const [selectedImage, setSelectedImage] = useState(null) // Безопасное получение данных из контекстов const furnitureItems = furnitureCartState?.items || [] const fabricItems = fabricCartState?.items || [] // Общая корзина (мебель + ткани) const cartIsEmpty = furnitureItems.length === 0 && fabricItems.length === 0 // Общая сумма корзины (только мебель, ткани бесплатны) const totalCartPrice = furnitureCartState?.totalPrice || 0 const totalCartItems = (furnitureCartState?.totalItems || 0) + (fabricCartState?.totalItems || 0) // Fix hydration issues useEffect(() => { setIsClient(true) }, []) const furnitureCartIsEmpty = furnitureItems.length === 0 const fabricCartIsEmpty = fabricItems.length === 0 const handleRemoveFurnitureItem = useCallback( (id: string) => { if (furnitureCartDispatch) { furnitureCartDispatch({ type: "REMOVE_FROM_CART", payload: id }) } }, [furnitureCartDispatch], ) const handleUpdateFurnitureQuantity = useCallback( (id: string, quantity: number) => { if (furnitureCartDispatch) { furnitureCartDispatch({ type: "UPDATE_QUANTITY", payload: { id, quantity } }) } }, [furnitureCartDispatch], ) const handleRemoveFabricItem = useCallback( (id: string) => { if (fabricCartDispatch) { fabricCartDispatch({ type: "REMOVE_FROM_CART", payload: id }) } }, [fabricCartDispatch], ) const handleUpdateFabricQuantity = useCallback( (id: string, quantity: number) => { if (fabricCartDispatch) { fabricCartDispatch({ type: "UPDATE_QUANTITY", payload: { id, quantity } }) } }, [fabricCartDispatch], ) const handleClearCart = useCallback(() => { if ((furnitureItems.length > 0 || fabricItems.length > 0) && furnitureCartDispatch && fabricCartDispatch) { furnitureCartDispatch({ type: "CLEAR_CART" }) fabricCartDispatch({ type: "CLEAR_CART" }) } setAppliedPromo(null) setShippingCost(300) }, [furnitureCartDispatch, fabricCartDispatch, furnitureItems.length, fabricItems.length]) const handleApplyPromoCode = useCallback(() => { // Reset messages setPromoError(null) setPromoSuccess(null) if (!promoCode.trim()) { setPromoError("Введите промокод") return } const normalizedCode = promoCode.trim().toUpperCase() if (normalizedCode in PROMO_CODES) { setAppliedPromo(normalizedCode) setPromoCode("") setPromoSuccess(`Промокод ${normalizedCode} успешно применен!`) // Apply free shipping if applicable if (PROMO_CODES[normalizedCode as keyof typeof PROMO_CODES].freeShipping) { setShippingCost(0) } } else { setPromoError("Недействительный промокод") } }, [promoCode]) const handleRemovePromoCode = useCallback(() => { setAppliedPromo(null) setShippingCost(300) // Reset shipping cost setPromoSuccess(null) }, []) const handleProceedToCheckout = useCallback(() => { setShowCheckoutForm(true) }, []) const handleInputChange = useCallback( (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) // Clear error for this field if it exists if (formErrors[name]) { setFormErrors((prev) => { const newErrors = { ...prev } delete newErrors[name] return newErrors }) } // Update shipping cost when delivery method changes if (name === "deliveryMethod") { const selectedMethod = DELIVERY_METHODS.find((method) => method.id === value) if (selectedMethod && !appliedPromo) { setShippingCost(selectedMethod.price) } } }, [appliedPromo, formErrors], ) const validateForm = useCallback(() => { const errors: Record = {} if (!formData.fullName.trim()) { errors.fullName = "Пожалуйста, введите ФИО" } if (!formData.phone.trim()) { errors.phone = "Пожалуйста, введите номер телефона" } else if (!/^\+?[0-9]{10,15}$/.test(formData.phone.replace(/\s+/g, ""))) { errors.phone = "Пожалуйста, введите корректный номер телефона" } if (formData.deliveryMethod !== "pickup" && !formData.address.trim()) { errors.address = "Пожалуйста, введите адрес доставки" } if (formData.deliveryMethod !== "pickup" && !formData.city.trim()) { errors.city = "Пожалуйста, введите город" } if (!formData.socialMediaUsername.trim()) { errors.socialMediaUsername = "Пожалуйста, введите имя пользователя" } setFormErrors(errors) return Object.keys(errors).length === 0 }, [formData]) const handleSubmitOrder = useCallback( (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } // Show success message setOrderSuccess(true) // Clear cart after 2 seconds and redirect to success page setTimeout(() => { if (furnitureCartDispatch && fabricCartDispatch) { furnitureCartDispatch({ type: "CLEAR_CART" }) fabricCartDispatch({ type: "CLEAR_CART" }) } router.push("/success") }, 2000) }, [validateForm, furnitureCartDispatch, fabricCartDispatch, router], ) // Calculate discount amount const getDiscountAmount = useCallback(() => { if (!appliedPromo) return 0 const promoInfo = PROMO_CODES[appliedPromo as keyof typeof PROMO_CODES] if (promoInfo.discount) { return Math.round(totalCartPrice * promoInfo.discount) } return 0 }, [appliedPromo, totalCartPrice]) // Calculate final total const getFinalTotal = useCallback(() => { const discount = getDiscountAmount() return ( totalCartPrice - discount + (appliedPromo && PROMO_CODES[appliedPromo as keyof typeof PROMO_CODES].freeShipping ? 0 : shippingCost) ) }, [appliedPromo, totalCartPrice, shippingCost, getDiscountAmount]) const handleOpenImage = (imageUrl: string) => { setSelectedImage(imageUrl) } const handleCloseImage = () => { setSelectedImage(null) } if (!isClient) { return null } if (orderSuccess) { return (

Заказ успешно оформлен!

Перенаправление на страницу подтверждения...

) } return (

Корзина

{/* Модальное окно для просмотра изображения */} {selectedImage && (

)} {cartIsEmpty ? (

Ваша корзина пуста

Добавьте товары в корзину, чтобы оформить заказ

) : showCheckoutForm ? (

Оформление заказа

Контактная информация

Социальная сеть для связи

sm.id === formData.socialMedia)?.name }`} name="socialMediaUsername" value={formData.socialMediaUsername} onChange={handleInputChange} error={formErrors.socialMediaUsername} required />

Способ доставки

{DELIVERY_METHODS.map((method) => (

{method.name}

{method.price === 0 ? "Бесплатно" : `${method.price} руб.`}

))}

{formData.deliveryMethod !== "pickup" && (

Адрес доставки

)}

Способ оплаты

{PAYMENT_METHODS.map((method) => (

{method.name}

))}

Ваш заказ

{furnitureItems.length > 0 && ( <>

Мебель:

{furnitureItems.map((item) => (

{item.product.name} x{item.quantity}

{item.totalPrice} руб.

))} )} {fabricItems.length > 0 && ( <>

Ткани (дополнительно):

{fabricItems.map((item) => (

{item.collectionNameRu} - {item.variant.color.ru} x{item.quantity}

Бесплатно

))} )}

Товары ({totalCartItems}): {totalCartPrice} руб.

{appliedPromo && getDiscountAmount() > 0 && (

Скидка по промокоду: -{getDiscountAmount()} руб.

)}

Доставка: {appliedPromo && PROMO_CODES[appliedPromo as keyof typeof PROMO_CODES].freeShipping ? ( Бесплатно ) : ( `${shippingCost} руб.` )}

К оплате: {getFinalTotal()} руб.

) : (

Товары в корзине

{cartIsEmpty ? (

Ваша корзина пуста.

) : ( <> {/* Отображение мебели в корзине */} {furnitureItems.length > 0 && ( <>

Мебель

{furnitureItems.map((item) => { const isBed = "bed" in item.product const category = isBed ? "bed" : "sofa" const productUrl = `/products/${category}/${item.product.slug}` // Get size info const sizeInfo = isBed ? item.product.bed[item.selectedSize || 0] : "sizes" in item.product ? item.product.sizes.sofa[item.selectedSize || 0] : null const sizeText = sizeInfo ? `${sizeInfo.width}x${sizeInfo.length} см` : "" // Get mechanism info for beds const mechanismText = isBed && item.withMechanism && item.selectedSize !== null ? `, с подъемным механизмом (+${item.product.bed[item.selectedSize].lifting_mechanism[1].price} руб.)` : "" return (

{item.product.name}

{sizeText} {mechanismText}

{item.quantity}

{item.totalPrice} руб.

) })} )} {/* Отображение тканей в корзине */} {fabricItems.length > 0 && ( <>

Ткани (дополнительно)

{fabricItems.map((item) => { // Create URL for fabric detail page const fabricUrl = `/fabrics/${item.categoryName}/${item.collectionName}` return (

handleOpenImage(item.variant.image)}> {item.variant.color.ru}

{item.collectionNameRu} - {item.variant.color.ru}

Категория: {item.categoryNameRu}

{item.quantity}

Бесплатно

) })} )} )}

Итого

Промокод

{!appliedPromo ? ( <>

setPromoCode(e.target.value)} error={promoError || undefined} />

{promoSuccess &&

{promoSuccess}

} ) : (

{appliedPromo} {PROMO_CODES[appliedPromo as keyof typeof PROMO_CODES].description}

)}

Товары ({totalCartItems}): {totalCartPrice} руб.

{appliedPromo && getDiscountAmount() > 0 && (

Скидка по промокоду: -{getDiscountAmount()} руб.

)}

Доставка: {appliedPromo && PROMO_CODES[appliedPromo as keyof typeof PROMO_CODES].freeShipping ? ( Бесплатно ) : ( `${shippingCost} руб.` )}

К оплате: {getFinalTotal()} руб.

)}

) } [V0_FILE]typescriptreact:file="widgets/fabric-detail/ui/FabricDetail.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Heart, ShoppingCart, ZoomIn, Check, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { useFabricCart } from "@/entities/fabric-cart/model/fabricCartContext" import { useFabricFavorites } from "@/entities/fabric-favorites/model/fabricFavoritesContext" import type { FabricCategory, FabricCollection, FabricVariant } from "@/shared/api/types" import FabricCollectionCard from "@/entities/fabric/ui/FabricCollectionCard" import styles from "./FabricDetail.module.css" interface FabricDetailProps { category: FabricCategory collection: FabricCollection similarCollections: FabricCollection[] categoryId: string } export default function FabricDetail({ category, collection, similarCollections, categoryId }: FabricDetailProps) { const { state: cartState, dispatch: cartDispatch } = useFabricCart() const { state: favoritesState, dispatch: favoritesDispatch } = useFabricFavorites() // State for selected variant const [selectedVariant, setSelectedVariant] = useState( collection.variants && collection.variants.length > 0 ? collection.variants[0] : null, ) // State for zoom functionality const [isZoomed, setIsZoomed] = useState(false) const [zoomPosition, setZoomPosition] = useState({ x: 50, y: 50 }) const [zoomLevel, setZoomLevel] = useState(2.5) const imageContainerRef = useRef(null) const [showSuccessMessage, setShowSuccessMessage] = useState(null) // State for showing all color variants const [showAllVariants, setShowAllVariants] = useState(false) const MAX_VISIBLE_VARIANTS = 12 // Get visible variants based on showAllVariants state const visibleVariants = collection.variants && collection.variants.length > 0 ? showAllVariants || collection.variants.length <= MAX_VISIBLE_VARIANTS ? collection.variants : collection.variants.slice(0, MAX_VISIBLE_VARIANTS) : [] // Calculate how many variants are hidden const hiddenVariantsCount = collection.variants ? Math.max(0, collection.variants.length - MAX_VISIBLE_VARIANTS) : 0 // Generate a unique ID for the current variant const getVariantId = (variant: FabricVariant) => `${categoryId}-${collection.name}-${variant.id}` // Check if variant is in cart/favorites const isVariantInCart = selectedVariant ? cartState.items.some((item) => item.id === getVariantId(selectedVariant)) : false const isVariantInFavorites = selectedVariant ? favoritesState.items.some((item) => item.id === getVariantId(selectedVariant)) : false // Handle mouse move for zoom effect const handleMouseMove = (e: React.MouseEvent) => { if (!isZoomed || !imageContainerRef.current) return const { left, top, width, height } = imageContainerRef.current.getBoundingClientRect() const x = ((e.clientX - left) / width) * 100 const y = ((e.clientY - top) / height) * 100 setZoomPosition({ x, y }) } // Handle mouse leave for zoom container const handleMouseLeave = () => { if (isZoomed) { setIsZoomed(false) } } // Toggle zoom state const toggleZoom = () => { setIsZoomed(!isZoomed) } // Handle adding to cart const handleAddToCart = () => { if (!selectedVariant) return if (!isVariantInCart) { cartDispatch({ type: "ADD_TO_CART", payload: { id: getVariantId(selectedVariant), categoryName: categoryId, categoryNameRu: category.name_ru, collectionName: collection.name, collectionNameRu: collection.name_ru, variant: selectedVariant, quantity: 1, }, }) // Show success message setShowSuccessMessage("Ткань добавлена в корзину") setTimeout(() => setShowSuccessMessage(null), 3000) } else { // Redirect to cart page when already in cart window.location.href = "/cart" } } // Handle toggling favorites const handleToggleFavorite = () => { if (!selectedVariant) return if (!isVariantInFavorites) { favoritesDispatch({ type: "ADD_TO_FAVORITES", payload: { id: getVariantId(selectedVariant), categoryName: categoryId, categoryNameRu: category.name_ru, collectionName: collection.name, collectionNameRu: collection.name_ru, variant: selectedVariant, }, }) // Show success message setShowSuccessMessage("Ткань добавлена в избранное") setTimeout(() => setShowSuccessMessage(null), 3000) } else { favoritesDispatch({ type: "REMOVE_FROM_FAVORITES", payload: getVariantId(selectedVariant), }) } } // Get placeholder image if no variant is selected const selectedImage = selectedVariant?.image || `/placeholder.svg?height=600&width=600&query=${collection.name_ru}%20fabric` // Clear success message when changing variants useEffect(() => { setShowSuccessMessage(null) }, [selectedVariant]) return (

{/* Back button */} Назад к коллекциям

{/* Left column - Images */}

{/* Color variants */} {collection.variants && collection.variants.length > 0 && (

Доступные цвета ({collection.variants.length})

{hiddenVariantsCount > 0 && ( )}

{visibleVariants.map((variant) => ( ))}

)}

{/* Right column - Details */}

{collection.name_ru}

Категория: {category.name_ru}

{collection.type && ( {collection.type} )} {collection.availability && ( {collection.availability} )}

{selectedVariant && (

Выбранный цвет

{selectedVariant.color.ru}

В наличии

)} {/* Action buttons */}

{/* Success message */} {showSuccessMessage && (

{showSuccessMessage}

)} {/* Fabric information tabs */} Описание Характеристики Уход {collection.description_ru ? (

{collection.description_ru}

) : (

{collection.name_ru} - это высококачественная ткань из категории {category.name_ru}. Идеально подходит для обивки мебели и создания уютного интерьера. Благодаря своей прочности и эстетичному внешнему виду, эта ткань станет отличным выбором для вашей мебели.

)} {collection.technicalSpecifications?.applicationAreas_ru && (

Области применения:

{area}

)} {collection.technicalSpecifications ? (

{Object.entries(collection.technicalSpecifications).map(([key, value]) => { // Skip application areas as they're arrays and null values if (key === "applicationAreas_ru" || !value) return null // Format the key for display let displayKey = key .replace(/([A-Z])/g, " $1") .replace(/_ru$/, "") .replace(/^./, (str) => str.toUpperCase()) // Map technical specification keys to Russian const keyMapping: Record = { "Fabric Type": "Тип ткани", "Abrasion Resistance": "Устойчивость к истиранию", Density: "Плотность", Composition: "Состав", Width: "Ширина", Origin: "Страна производства", "Collection Name": "Название коллекции", Directionality: "Направленность рисунка", } displayKey = keyMapping[displayKey] || displayKey return (

{displayKey}

{value}

) })}

) : (

Технические характеристики не указаны.

)} {collection.careInstructions_ru && collection.careInstructions_ru.length > 0 ? (

{instruction}

) : (

Сухая чистка
Не использовать отбеливатель
Не гладить
Избегать попадания прямых солнечных лучей
Пятна удалять сразу после появления

)}

Закажите бесплатный образец ткани, чтобы оценить качество материала перед покупкой

{/* Similar fabrics section */} {similarCollections.length > 0 && (

О нас

Контакты

Адрес

Телефон

Email

Режим работы

Заказ успешно оформлен!

Категории

{category.name}

Специальное предложение

Отзывы наших клиентов

{review.name}

Оформление заказа

Контактная информация

Адрес доставки

Способ доставки

Способ оплаты

Ваш заказ

Доставка и оплата

Сроки доставки:

Рассрочка и кредит:

Как отслеживать статус заказа?

Что делать, если товар не подошел?

Как оформить доставку в другой город?

Можно ли заказать сборку мебели?

{slide.title}

Недавно просмотренные

{product.name}

Размер:

Подъемный механизм:

Характеристики:

Варианты оплаты:

Рассрочка и кредит:

{plan.bank}

Похожие товары

Популярные товары

Популярные товары

{category.name_ru}

{variant.color.ru}

Как выбрать ткань для мебели?

Износостойкость

Состав ткани

Практичность

Эстетика

Ткани для мебели

{variant.color.ru}

Выберите опции

Фильтры

Коллекция

Тип ткани

Устойчивость к истиранию

Наличие

Избранное

У вас нет избранных товаров

Мебель

Ткани

Каталог мебели

Фильтры

Категории

Цена

Фильтры

Коллекция

Тип ткани

Устойчивость к истиранию (циклов)

Наличие

{collection.name_ru}

Доступные цвета

{variant.color.ru}

Технические характеристики

Инструкции по уходу

{collectionNameRu}

{category.name_ru}

Заказ успешно оформлен!

Корзина

Ваша корзина пуста

Оформление заказа

Контактная информация

Способ доставки

Адрес доставки

Способ оплаты

About

Tags

Share

About

Tags

Share

More from rubz1e2021-4185

More Templates Like This