Слева висит превью, которое можно свободно перетаскивать, справа — крупный список проектов. Наведение на название подсвечивает его, ставит рядом точку и меняет картинку в превью.
Клик по проекту плавно переносит превью и название в новую раскладку: картинка разворачивается в большую обложку, заголовок встаёт над ней, а ниже проявляются описание, линия и кнопки. Клик по странице возвращает к списку.
Скопируйте эти файлы в components/projects-showcase/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ProjectsShowcase } from "@/components/projects-showcase/projects-showcase";
const projects = [
{ title: "Портфолио", img: "/photos/folio.webp" },
{ title: "Магазин", img: "/photos/shop.webp" },
];
export function Work() {
return <ProjectsShowcase projects={projects} listLabel="работы" previewHeight={240} />;
}projectsПроекты: title и img
Тип ShowcaseProject[]
listLabel?Подпись над списком
Тип string·По умолчанию "мои проекты"
detailTitle?Заголовок на странице проекта
Тип string·По умолчанию "SaaS на миллиард"
paragraphs?Текст описания проекта
Тип string[]·По умолчанию три абзаца
previewLabel?Первая кнопка
Тип string·По умолчанию "Живое превью"
sourceLabel?Вторая кнопка
Тип string·По умолчанию "Исходный код"
previewHeight?Высота перетаскиваемого превью, px
Тип number·По умолчанию 200
titleSize?Размер названий в списке, px
Тип number·По умолчанию 36
radius?Скругление превью и обложки, px
Тип number·По умолчанию 25
className?Классы корневого блока
Тип string