71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type ActionTone = 'primary' | 'secondary' | 'danger' | 'neutral';
|
|
|
|
export type FloatingAction = {
|
|
key: string;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
onClick: () => void;
|
|
tone?: ActionTone;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
export function FloatingActionBar({ actions, className }: { actions: FloatingAction[]; className?: string }): React.ReactElement | null {
|
|
if (!actions.length) {
|
|
return null;
|
|
}
|
|
|
|
const toneClasses: Record<ActionTone, string> = {
|
|
primary: 'bg-primary text-primary-foreground shadow-primary/25 hover:bg-primary/90 focus-visible:ring-primary/70 border border-primary/20',
|
|
secondary: 'bg-[var(--tenant-surface-strong)] text-[var(--tenant-foreground)] shadow-slate-300/60 hover:bg-[var(--tenant-surface)] focus-visible:ring-slate-200 border border-[var(--tenant-border-strong)]',
|
|
neutral: 'bg-white/90 text-slate-900 shadow-slate-200/80 hover:bg-white focus-visible:ring-slate-200 border border-slate-200 dark:bg-slate-800/80 dark:text-white dark:border-slate-700',
|
|
danger: 'bg-rose-500 text-white shadow-rose-300/50 hover:bg-rose-600 focus-visible:ring-rose-200 border border-rose-400/80',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'pointer-events-none fixed inset-x-4 bottom-[calc(env(safe-area-inset-bottom,0px)+72px)] z-50 sm:inset-auto sm:right-6 sm:bottom-6',
|
|
className
|
|
)}
|
|
style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
|
|
>
|
|
<div className="pointer-events-auto flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
|
|
{actions.map((action) => {
|
|
const Icon = action.icon;
|
|
const tone = action.tone ?? 'primary';
|
|
|
|
return (
|
|
<Button
|
|
key={action.key}
|
|
size="lg"
|
|
className={cn(
|
|
'group flex h-11 w-11 items-center justify-center gap-0 rounded-full p-0 text-sm font-semibold shadow-lg transition-all duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-auto sm:w-auto sm:gap-2 sm:px-4 sm:py-2',
|
|
toneClasses[tone]
|
|
)}
|
|
onClick={action.onClick}
|
|
disabled={action.disabled || action.loading}
|
|
aria-label={action.ariaLabel ?? action.label}
|
|
>
|
|
{action.loading ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Icon className="h-4 w-4" />
|
|
)}
|
|
<span className="hidden sm:inline">{action.label}</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|