Компактная тёмная панель с иконками. Над ней живёт одна общая подсказка: при наведении на кнопку она на пружине перетекает к ней и через clip-path открывает только нужную подпись вместе с горячими клавишами.
Уход курсора гасит подсказку. У кнопок могут быть метки-точки. Цвета панели, иконок и метки, размер кнопок и жёсткость перетекания настраиваются.
Скопируйте эти файлы в components/toolbar-tooltip/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { Inbox, MessageCircle } from "lucide-react";
import { ToolbarTooltip } from "@/components/toolbar-tooltip/toolbar-tooltip";
const items = [
{ icon: <MessageCircle className="h-full w-full" />, label: "Комментарий", labelHasKeyword: ["К"], hasBadge: false },
{ icon: <Inbox className="h-full w-full" />, label: "Входящие", labelHasKeyword: false as const, hasBadge: true },
];
export function Toolbar() {
return <ToolbarTooltip items={items} buttonSize={36} />;
}itemsКнопки панели и их подписи
Тип { icon: ReactNode; label: string; labelHasKeyword: ReactNode[] | false; hasBadge: boolean }[]
barColor?Цвет панели и подсказки
Тип string·По умолчанию чёрный
iconColor?Цвет иконок и текста подсказки
Тип string·По умолчанию белый
badgeColor?Цвет меток
Тип string·По умолчанию цвет --color-brand
stiffness?Жёсткость пружины перетекания
Тип number·По умолчанию 350
tooltipRadius?Скругление подсказки в пикселях
Тип number·По умолчанию 10
tooltipOffset?Высота подсказки над панелью в пикселях
Тип number·По умолчанию 56
buttonSize?Размер кнопок в пикселях
Тип number·По умолчанию 32
className?Классы корневого блока
Тип string