nandi.uk
This repository has no description
1.8 kB
60 lines
1'use client';
2
3import { ActionIcon, Menu } from '@mantine/core';
4import { MdNotificationAdd, MdNotificationsActive } from 'react-icons/md';
5import { IoMdCheckmark } from 'react-icons/io';
6
7export interface SubscriptionPrefs {
8 cards: boolean;
9 connections: boolean;
10}
11
12interface Props {
13 targetId: string;
14 targetType: 'COLLECTION' | 'USER';
15 prefs?: SubscriptionPrefs;
16 onPrefsChange?: (next: SubscriptionPrefs) => void;
17}
18
19const OPTIONS: { key: keyof SubscriptionPrefs; label: string }[] = [
20 { key: 'cards', label: 'Cards' },
21 { key: 'connections', label: 'Connections' },
22];
23
24const DEFAULT_PREFS: SubscriptionPrefs = { cards: false, connections: false };
25
26export default function SubscribeButton({ prefs, onPrefsChange }: Props) {
27 const resolved = prefs ?? DEFAULT_PREFS;
28 const isActive = resolved.cards || resolved.connections;
29
30 function toggle(key: keyof SubscriptionPrefs) {
31 onPrefsChange?.({ ...resolved, [key]: !resolved[key] });
32 }
33
34 return (
35 <Menu shadow="sm" position="bottom-end" closeOnItemClick={false}>
36 <Menu.Target>
37 <ActionIcon
38 variant={isActive ? 'light' : 'filled'}
39 color={isActive ? 'gray' : 'dark'}
40 radius="xl"
41 aria-label="Subscribe"
42 >
43 {isActive ? <MdNotificationsActive size={16} /> : <MdNotificationAdd size={16} />}
44 </ActionIcon>
45 </Menu.Target>
46 <Menu.Dropdown>
47 <Menu.Label>Notify me about</Menu.Label>
48 {OPTIONS.map((opt) => (
49 <Menu.Item
50 key={opt.key}
51 rightSection={resolved[opt.key] ? <IoMdCheckmark /> : null}
52 onClick={() => toggle(opt.key)}
53 >
54 {opt.label}
55 </Menu.Item>
56 ))}
57 </Menu.Dropdown>
58 </Menu>
59 );
60}