Большой тёмный блок с фото продукта и столбиком пилюль-функций слева. Нажатие на пилюлю пружинисто раскрывает её в карточку с описанием, а фото сменяется на соответствующее со сдвигом и лёгким масштабом.
Первая пилюля отвечает за цвета: в раскрытом виде в ней появляются кружки оттенков, и выбор оттенка меняет фото и цвет кружка в свёрнутой пилюле. Стрелки слева переключают функции по очереди, крестик справа возвращает витрину к главному фото. На телефонах пилюли превращаются в горизонтальную карусель.
Скопируйте эти файлы в components/product-feature-block/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ProductFeatureBlock } from "@/components/product-feature-block/product-feature-block";
export function Features() {
return (
<ProductFeatureBlock
heroSrc="/photos/hero.webp"
features={[{ id: 1, name: "Цвета", desc: "Три оттенка на выбор.", src: "/photos/colors.webp" }]}
colors={[{ id: 0, color: "#ffffff", src: "/photos/white.webp" }]}
height={640}
/>
);
}featuresФункции: id, name, desc, src
Тип ProductFeature[]
colorsОттенки для первой функции: id, color, src
Тип ProductColor[]
heroSrcГлавное фото до выбора функции
Тип string
background?Фон витрины
Тип string·По умолчанию "#000000"
height?Высота блока, px
Тип number·По умолчанию 745
radius?Скругление блока, px
Тип number·По умолчанию rounded-4xl
defaultActive?Индекс функции, раскрытой при первом показе
Тип number | null·По умолчанию null
className?Классы внешней обёртки
Тип string