Небольшой круглый бейдж со знаком Astra, похожий на индикатор сборки в углу dev-сервера. При наведении из него вверх вытекает карточка со сводкой: название, версия и строки статуса — например, число ошибок, подсвеченное красным, и тип маршрута.
Бейдж и карточка склеены SVG-фильтром «гуи», поэтому при раскрытии и сворачивании они тянутся друг к другу как капли. Карточка раскрывается пружиной с небольшой задержкой по ширине, а её содержимое проявляется из размытия; когда курсор уходит, всё стягивается обратно в кружок.
Скопируйте эти файлы в components/gooey-status-badge/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { GooeyStatusBadge } from "@/components/gooey-status-badge/gooey-status-badge";
export function BuildStatus() {
return (
<div className="h-[400px]">
<GooeyStatusBadge
version="v3.0.0"
rows={[
{ label: "Ошибки", value: "0", tone: "error" },
{ label: "Маршрут", value: "Динамика", tone: "muted" },
]}
/>
</div>
);
}name?Название в шапке карточки
Тип string·По умолчанию "Astra"
version?Версия в шапке карточки
Тип string·По умолчанию "v2.4.1"
rows?Строки сводки
Тип { label: string; value: string; tone?: "error" | "muted" }[]·По умолчанию ошибки и маршрут
icon?Иконка внутри бейджа
Тип ReactNode·По умолчанию знак Astra
defaultOpen?Раскрыта ли карточка при загрузке
Тип boolean·По умолчанию true
badgeColor?Цвет бейджа и карточки; по умолчанию чёрный, в тёмной теме графитовый
Тип string
errorColor?Цвет значения с тоном error; по умолчанию красный
Тип string
panelWidth?Ширина раскрытой карточки в пикселях
Тип number·По умолчанию 200
gooStrength?Сила размытия гуи-фильтра — насколько тягуче склеиваются формы
Тип number·По умолчанию 4.4
className?Классы корневого блока
Тип string