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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x 2x 2x 8x 8x | import React from 'react';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/public/ui/sheet';
import { Button } from '@/components/public/ui/button';
interface ExtendSessionSheetProps {
open: boolean;
onClose: () => void;
onExtend: (minutes: number) => void;
}
const REDUCE_OPTIONS = [-20, -15, -10, -5] as const;
const EXTEND_OPTIONS = [5, 10, 15, 20] as const;
export const ExtendSessionSheet: React.FC<ExtendSessionSheetProps> = ({
open,
onClose,
onExtend,
}) => {
const handleAdjust = (minutes: number) => {
onExtend(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-5">
<SheetTitle className="text-center text-xl text-foreground">
Session Zeit anpassen
</SheetTitle>
</SheetHeader>
<div className="max-w-sm mx-auto space-y-4">
{/* Reduce */}
<div>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-2 text-center">
Kürzen
</p>
<div className="grid grid-cols-4 gap-2">
{REDUCE_OPTIONS.map((minutes) => (
<button
key={minutes}
onClick={() => handleAdjust(minutes)}
className="py-3 rounded-xl text-base font-bold border-2 border-amber-500 text-amber-400 hover:bg-amber-500/10 transition-colors"
>
{minutes} min
</button>
))}
</div>
</div>
{/* Extend */}
<div>
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-2 text-center">
Verlängern
</p>
<div className="grid grid-cols-4 gap-2">
{EXTEND_OPTIONS.map((minutes) => (
<button
key={minutes}
onClick={() => handleAdjust(minutes)}
className="py-3 rounded-xl text-base font-bold bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
>
+{minutes} min
</button>
))}
</div>
</div>
<Button
variant="ghost"
onClick={onClose}
className="w-full text-muted-foreground hover:text-foreground"
>
Abbrechen
</Button>
</div>
</SheetContent>
</Sheet>
);
};
|