Четыре цветные плитки счетов кошелька стоят сеткой два на два. Нажмите на кнопку меню в углу плитки — она плавно раскрывается во всю ширину, иконка и подписи увеличиваются, появляются «Копировать адрес» и «Настроить», а остальные три плитки сжимаются в ряд под ней.
Все переходы сделаны общими layout-анимациями, поэтому плитки перетекают между позициями без скачков. Клик в любом месте за пределами блока сворачивает всё обратно.
Скопируйте эти файлы в components/wallet-accounts/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { SparklesIcon, WalletAccounts } from "@/components/wallet-accounts/wallet-accounts";
const accounts = [
{ name: "Astra", amount: "1.03 ETH", bgColor: "bg-purple-500", icon: SparklesIcon },
{ name: "Копилка", amount: "25.08 ETH", bgColor: "bg-neutral-900", icon: SparklesIcon },
{ name: "Стейкинг", amount: "0.04 ETH", bgColor: "bg-cyan-500", icon: SparklesIcon },
{ name: "Расходы", amount: "0 ETH", bgColor: "bg-blue-500", icon: SparklesIcon },
];
export function Accounts() {
return <WalletAccounts accounts={accounts} copyLabel="Копировать адрес" customizeLabel="Настроить" />;
}accounts?Счета: name, amount, bgColor, необязательный color и icon
Тип WalletAccount[]·По умолчанию четыре счёта
copyLabel?Текст ссылки копирования адреса
Тип string·По умолчанию "Copy Address"
customizeLabel?Текст кнопки настройки
Тип string·По умолчанию "Customize"
radius?Скругление плиток в пикселях
Тип number·По умолчанию 24
className?Классы корневого блока
Тип string