В свёрнутом виде это тонкая плашка с названием продукта и двумя кнопками. По нажатию на «Обзор» панель на пружине раскрывается вниз: сверху выезжает карусель моделей с метками «Новинка» и «Вы здесь», название перелетает в крупный заголовок, а кнопка покупки перетекает к цене.
Ниже появляются чипы разделов и ссылки. Кнопка «Обзор» превращается в круглый крестик, который сворачивает панель обратно. Карусель листается стрелками и перетаскиванием.
Скопируйте эти файлы в components/product-nav-expand/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ProductNavExpand } from "@/components/product-nav-expand/product-nav-expand";
export function ProductBar() {
return (
<ProductNavExpand
title="Astra One"
items={[{ src: "/photos/one.webp", label: "Astra One", current: true }]}
price="От 59 900 ₽"
priceNote="или 9 990 ₽/мес."
overviewLabel="Разделы"
sections={["главное", "камеры"]}
links={["Характеристики"]}
/>
);
}titleНазвание продукта
Тип string
itemsМодели карусели: src, label, флаги current и new
Тип ProductNavItem[]
priceЦена в раскрытой панели
Тип string
priceNoteПодпись под ценой
Тип string
overviewLabelЗаголовок блока разделов
Тип string
sectionsЧипы разделов
Тип string[]
linksСсылки внизу панели
Тип string[]
exploreLabel?Текст кнопки раскрытия
Тип string·По умолчанию "Обзор"
buyLabel?Текст кнопки покупки
Тип string·По умолчанию "Купить"
currentLabel?Метка текущей модели
Тип string·По умолчанию "Вы здесь"
newLabel?Метка новой модели
Тип string·По умолчанию "Новинка"
accent?Цвет кнопки покупки, меток и ссылок
Тип string·По умолчанию цвет бренда
maxWidth?Максимальная ширина панели, px
Тип number·По умолчанию 1024
radius?Скругление свёрнутой панели, px (раскрытая на 10 px больше)
Тип number·По умолчанию 18
defaultOpen?Панель раскрыта при первом показе
Тип boolean·По умолчанию false
className?Классы корневого блока
Тип string