Одна кнопка действия, которая по нажатию не выполняет его сразу, а пружинно перетекает в карточку подтверждения: сама кнопка «переезжает» в правый нижний угол карточки благодаря общему layout-переходу, а фон за карточкой мягко размывается.
Закрыть карточку можно кнопкой отмены, крестиком или кликом по размытому фону — кнопка той же пружиной возвращается на место. Нажатие на кнопку в карточке закрывает её и вызывает onConfirm. При нажатии кнопки слегка сжимаются.
Скопируйте эти файлы в components/confirm-button-morph/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ConfirmButtonMorph } from "@/components/confirm-button-morph/confirm-button-morph";
export function Payout() {
return (
<div className="relative flex h-[480px] items-end justify-center p-5">
<ConfirmButtonMorph label="Вывести" message="Вывести все средства на карту?" onConfirm={() => {}} />
</div>
);
}label?Текст кнопки действия
Тип string·По умолчанию "Получить"
title?Заголовок карточки
Тип string·По умолчанию "Подтверждение"
message?Текст вопроса в карточке
Тип string·По умолчанию "Вы уверены, что хотите получить целую гору денег?"
cancelLabel?Текст кнопки отмены
Тип string·По умолчанию "Отмена"
accentColor?Цвет кнопки и иконок; по умолчанию фирменный цвет темы
Тип string
maxWidth?Максимальная ширина карточки в пикселях
Тип number·По умолчанию 430
buttonWidth?Максимальная ширина кнопки в пикселях
Тип number·По умолчанию 300
panelRadius?Скругление карточки в пикселях
Тип number·По умолчанию 24
stiffness?Жёсткость пружины появления карточки
Тип number·По умолчанию 550
onConfirm?Вызывается при подтверждении
Тип () => void
className?Классы обёртки кнопки и карточки
Тип string