92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import { Card } from '@repo/ui/components/ui/card';
|
||
import { Ban, Check, Lock, Trash2, Unlock } from 'lucide-react';
|
||
|
||
type FloatingActionPanelProps = {
|
||
readonly isOpen?: boolean;
|
||
readonly onCancel?: () => void;
|
||
readonly onConfirm?: () => void;
|
||
readonly onDelete?: () => void;
|
||
readonly onToggle?: () => void;
|
||
};
|
||
|
||
export default function FloatingActionPanel({
|
||
isOpen,
|
||
onCancel,
|
||
onConfirm,
|
||
onDelete,
|
||
onToggle,
|
||
}: FloatingActionPanelProps) {
|
||
return (
|
||
<Card className="fixed inset-x-4 bottom-4 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-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-950/70 dark:text-blue-300 dark:hover:bg-blue-900/70'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-900/70 dark:text-gray-300 dark:hover:bg-gray-800/70'
|
||
}
|
||
`}
|
||
onClick={onToggle}
|
||
size="sm"
|
||
>
|
||
{isOpen ? (
|
||
<>
|
||
<Lock className="mr-2 size-4" />
|
||
<span>Закрыть</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Unlock className="mr-2 size-4" />
|
||
<span>Открыть</span>
|
||
</>
|
||
)}
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка удалить */}
|
||
{onDelete && (
|
||
<Button
|
||
className="w-full rounded-2xl bg-orange-100 text-sm text-orange-700 transition-all duration-200 hover:bg-orange-200 dark:bg-orange-950/70 dark:text-orange-300 dark:hover:bg-orange-900/70 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-100 text-sm text-red-700 transition-all duration-200 hover:bg-red-200 dark:bg-red-950/70 dark:text-red-300 dark:hover:bg-red-900/70 sm:w-auto"
|
||
onClick={onCancel}
|
||
size="sm"
|
||
>
|
||
<Ban className="mr-2 size-4" />
|
||
<span>Отменить</span>
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка подтверд<D180><D0B4>ть */}
|
||
{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>
|
||
);
|
||
}
|