125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
'use client';
|
||
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import { Card } from '@repo/ui/components/ui/card';
|
||
import { Ban, Check, Loader2, Lock, RotateCcw, Trash2, Unlock } from 'lucide-react';
|
||
|
||
type FloatingActionPanelProps = {
|
||
readonly isCancelling?: boolean;
|
||
readonly isOpen?: boolean;
|
||
readonly onCancel?: () => void;
|
||
readonly onConfirm?: () => void;
|
||
readonly onDelete?: () => void;
|
||
readonly onRepeat?: () => void;
|
||
readonly onToggle?: () => void;
|
||
};
|
||
|
||
export default function FloatingActionPanel({
|
||
isCancelling = false,
|
||
isOpen,
|
||
onCancel,
|
||
onConfirm,
|
||
onDelete,
|
||
onRepeat,
|
||
onToggle,
|
||
}: FloatingActionPanelProps) {
|
||
// Если не переданы обработчики, скрываем панель
|
||
if (!onCancel && !onConfirm && !onDelete && !onRepeat && !onToggle) return null;
|
||
|
||
// Если слот отменяется, показываем статус вместо кнопок
|
||
if (isCancelling) {
|
||
return (
|
||
<Card className="fixed inset-x-4 bottom-4 z-50 rounded-3xl border-0 bg-background/95 p-4 shadow-2xl backdrop-blur-sm dark:bg-primary/5 md:bottom-6 md:left-auto md:right-6 md:p-6">
|
||
<div className="flex items-center justify-center gap-3">
|
||
<Loader2 className="size-5 animate-spin text-orange-600 dark:text-orange-400" />
|
||
<span className="font-medium text-orange-700 dark:text-orange-300">
|
||
Слот отменяется...
|
||
</span>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card className="fixed inset-x-4 bottom-4 z-50 rounded-3xl border-0 bg-background/95 p-4 shadow-2xl backdrop-blur-sm dark:bg-primary/5 md:bottom-6 md:left-auto md:right-6 md:p-6">
|
||
<div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4">
|
||
{/* Кнопка закрыть/открыть */}
|
||
{onToggle && (
|
||
<Button
|
||
className={`
|
||
w-full rounded-2xl text-sm transition-all duration-200 sm:w-auto
|
||
${
|
||
isOpen
|
||
? 'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700'
|
||
: 'bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700'
|
||
}
|
||
`}
|
||
onClick={onToggle}
|
||
size="sm"
|
||
>
|
||
{isOpen ? (
|
||
<>
|
||
<Lock className="mr-2 size-4" />
|
||
<span>Закрыть</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Unlock className="mr-2 size-4" />
|
||
<span>Открыть</span>
|
||
</>
|
||
)}
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка повторить */}
|
||
{onRepeat && (
|
||
<Button
|
||
className="w-full rounded-2xl bg-purple-500 text-sm text-white transition-all duration-200 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 sm:w-auto"
|
||
onClick={onRepeat}
|
||
size="sm"
|
||
>
|
||
<RotateCcw className="mr-2 size-4" />
|
||
<span>Повторить</span>
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка удалить */}
|
||
{onDelete && (
|
||
<Button
|
||
className="w-full rounded-2xl bg-orange-500 text-sm text-white transition-all duration-200 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 sm:w-auto"
|
||
onClick={onDelete}
|
||
size="sm"
|
||
>
|
||
<Trash2 className="mr-2 size-4" />
|
||
<span>Удалить</span>
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка отменить */}
|
||
{onCancel && (
|
||
<Button
|
||
className="w-full rounded-2xl bg-red-500 text-sm text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 sm:w-auto"
|
||
onClick={onCancel}
|
||
size="sm"
|
||
>
|
||
<Ban className="mr-2 size-4" />
|
||
<span>Отменить</span>
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка подтвердить */}
|
||
{onConfirm && (
|
||
<Button
|
||
className="w-full rounded-2xl bg-green-600 text-sm text-white shadow-lg transition-all duration-200 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 sm:w-auto"
|
||
onClick={onConfirm}
|
||
size="sm"
|
||
>
|
||
<Check className="mr-2 size-4" />
|
||
<span>Подтвердить</span>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|