104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
import { Switch } from "~/components/ui/switch";
|
|
import { Label } from "~/components/ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
|
|
import type { NotificationMode } from "~/hooks/useDraftNotifications";
|
|
|
|
interface NotificationSettingsProps {
|
|
enabled: boolean;
|
|
onEnabledChange: (enabled: boolean) => void;
|
|
mode: NotificationMode;
|
|
onModeChange: (mode: NotificationMode) => void;
|
|
permissionState: NotificationPermission | "unsupported";
|
|
switchOnly?: boolean;
|
|
}
|
|
|
|
export function NotificationSettings({
|
|
enabled,
|
|
onEnabledChange,
|
|
mode,
|
|
onModeChange,
|
|
permissionState,
|
|
switchOnly = false,
|
|
}: NotificationSettingsProps) {
|
|
if (permissionState === "unsupported") {
|
|
return null;
|
|
}
|
|
|
|
if (switchOnly) {
|
|
return (
|
|
<>
|
|
<Switch
|
|
checked={enabled}
|
|
onCheckedChange={onEnabledChange}
|
|
disabled={permissionState === "denied"}
|
|
/>
|
|
{enabled && (
|
|
<div className="absolute top-full right-0 mt-2 bg-card border border-border rounded-lg shadow-lg p-3 z-50 min-w-[180px]">
|
|
<RadioGroup
|
|
value={mode}
|
|
onValueChange={(value) => onModeChange(value as NotificationMode)}
|
|
className="space-y-2"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="my_turn" id="notif_header_my_turn" />
|
|
<Label htmlFor="notif_header_my_turn" className="text-sm cursor-pointer">
|
|
My Turn Only
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="all_picks" id="notif_header_all_picks" />
|
|
<Label htmlFor="notif_header_all_picks" className="text-sm cursor-pointer">
|
|
All Picks
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="notifications-switch" className="text-sm font-semibold">
|
|
Notifications
|
|
</Label>
|
|
<Switch
|
|
id="notifications-switch"
|
|
checked={enabled}
|
|
onCheckedChange={onEnabledChange}
|
|
disabled={permissionState === "denied"}
|
|
/>
|
|
</div>
|
|
|
|
{permissionState === "denied" && (
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Notifications blocked by browser. Update in browser settings to
|
|
enable.
|
|
</p>
|
|
)}
|
|
|
|
{enabled && (
|
|
<RadioGroup
|
|
value={mode}
|
|
onValueChange={(value) => onModeChange(value as NotificationMode)}
|
|
className="space-y-2 mt-3"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="my_turn" id="notif_my_turn" />
|
|
<Label htmlFor="notif_my_turn" className="text-sm cursor-pointer">
|
|
My Turn Only
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="all_picks" id="notif_all_picks" />
|
|
<Label htmlFor="notif_all_picks" className="text-sm cursor-pointer">
|
|
All Picks
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|