Ряд маленьких портретов над огромной надписью. При наведении на фото оно плавно увеличивается, прежняя надпись уезжает вверх, а имя человека выезжает снизу по буквам, от центра к краям.
За курсором над рядом портретов на пружине следует круглая метка со стрелкой. Когда курсор уходит, метка сжимается, а на место имени возвращается надпись по умолчанию.
Скопируйте эти файлы в components/hover-members/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { HoverMembers } from "@/components/hover-members/hover-members";
const TEAM = [
{ name: "Аня", image: "/photos/anya.webp" },
{ name: "Лев", image: "/photos/lev.webp" },
];
export default function Page() {
return (
<div className="h-[640px] w-full">
<HoverMembers teamMembers={TEAM} defaultName="astraui" />
</div>
);
}teamMembersУчастники: имя и адрес фото
Тип HoverMemberItem[]
defaultName?Надпись, которая видна без наведения
Тип string·По умолчанию "astraui"
backgroundColor?Цвет фона секции
Тип string·По умолчанию "#121212"
textColor?Tailwind-класс цвета надписи по умолчанию
Тип string·По умолчанию "text-white"
hoverTextColor?Tailwind-класс цвета имени при наведении
Тип string·По умолчанию "text-[#66d9e8]"
cursorColor?Tailwind-класс фона метки курсора
Тип string·По умолчанию "bg-[#0b7a96]"
nameColor?Цвет надписи по умолчанию, перекрывает textColor
Тип string
hoverNameColor?Цвет имени при наведении, перекрывает hoverTextColor
Тип string
cursorFill?Цвет метки курсора, перекрывает cursorColor
Тип string
thumbSize?Размер портрета в пикселях, при наведении он вырастает вдвое
Тип number·По умолчанию 60
className?Дополнительные классы секции
Тип string