Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 1x 1x 2x 2x 2x 2x 2x 8x | import React, { useEffect, useState } from 'react';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/public/ui/sheet';
import { Button } from '@/components/public/ui/button';
interface DelaySessionSheetProps {
open: boolean;
onClose: () => void;
onDelay: (minutes: number) => void;
disabled?: boolean;
}
const DELAY_OPTIONS = [5, 10, 15, 20] as const;
export const DelaySessionSheet: React.FC<DelaySessionSheetProps> = ({
open,
onClose,
onDelay,
disabled = false,
}) => {
const [sending, setSending] = useState(false);
useEffect(() => {
Eif (!open) setSending(false);
}, [open]);
const handleDelay = (minutes: number) => {
setSending(true);
onDelay(minutes);
onClose();
};
return (
<Sheet open={open} onOpenChange={(o) => !o && onClose()}>
<SheetContent side="bottom" className="dark rounded-t-2xl pb-10 border-border">
<SheetHeader className="mb-6">
<SheetTitle className="text-center text-xl text-foreground">
Vorherige Session mehr Zeit geben?
</SheetTitle>
</SheetHeader>
<div className="flex flex-col gap-3 max-w-sm mx-auto">
{DELAY_OPTIONS.map((minutes) => (
<button
key={minutes}
disabled={disabled || sending}
onClick={() => handleDelay(minutes)}
className="w-full py-4 rounded-xl text-lg font-bold bg-amber-500 text-white hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
+{minutes} min
</button>
))}
<Button
variant="ghost"
onClick={onClose}
className="w-full mt-1 text-muted-foreground hover:text-foreground"
>
Abbrechen
</Button>
</div>
</SheetContent>
</Sheet>
);
};
|