Архив проектов крупными строками. При прокрутке строка, пересекающая верхнюю треть экрана, загорается, остальные остаются приглушёнными, а фон всего списка плавно перетекает в цвет текущего проекта. Каждая смена строки сопровождается тихим щелчком.
В правом нижнем углу висит превью с обложкой активного проекта — его можно перетащить мышью. Список бесконечный: по мере прокрутки к нему дописываются новые круги проектов.
Скопируйте эти файлы в components/color-archive-list/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ColorArchiveList } from "@/components/color-archive-list/color-archive-list";
const projects = [
{ id: 0, name: "Сквозь время", description: "Печатный дизайн", badge: "Печать", bgColor: "#ff0000", image: "/photos/1.webp" },
{ id: 1, name: "Тихое эхо", description: "Типографика", badge: "Типографика", bgColor: "#66d9e8", image: "/photos/2.webp" },
];
export function Archive() {
return (
<div className="h-dvh">
<ColorArchiveList projects={projects} dateLabel="[01 сен]" previewSize="md" />
</div>
);
}projectsПроекты: id, name, description, badge, bgColor, image
Тип ArchiveProject[]
showPreview?Показывать перетаскиваемое превью обложки
Тип boolean·По умолчанию true
previewSize?Размер превью
Тип "sm" | "md" | "lg"·По умолчанию "lg"
enableSound?Щелчок при смене активной строки
Тип boolean·По умолчанию true
infiniteScroll?Дописывать новые круги проектов при прокрутке
Тип boolean·По умолчанию true
scrollThreshold?Расстояние до конца списка в пикселях, с которого дописываются строки
Тип number·По умолчанию 1000
dateLabel?Метка даты в строке
Тип string·По умолчанию "[01 sep]"
titleSize?Размер названий в пикселях
Тип number
className?Классы корневого блока
Тип string·По умолчанию ""