splt/src/components/UserDropdown.tsx at f57f6f980f46a19b06295728b2d42afd829ab4b7 · guid3d/splt · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
"use client";
import {
  Menu,
  rem,
  Stack,
  Text,
  Title,
  useMantineColorScheme,
} from "@mantine/core";
import UserAvatar from "@/components/UserAvatar";
import {
  IconBrightnessAutoFilled,
  IconCreditCard,
  IconMoonFilled,
  IconSunFilled,
  IconUserCircle,
  IconUsers,
} from "@tabler/icons-react";
import { Participant } from "@/types";
import { useDisclosure } from "@mantine/hooks";
import UserSelectionModal from "./UserSelectionModal";
import PaymentDetailsModal from "./PaymentDetailsModal";

type UserDropdownProps = {
  currentUser: Participant | null;
  participants: Participant[];
  onSelectUser: (participantId: string) => void;
};

const UserDropdown = ({
  currentUser,
  participants,
  onSelectUser,
}: UserDropdownProps) => {
  const { colorScheme, setColorScheme } = useMantineColorScheme();
  const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
  const [paymentModalOpened, { open: openPaymentModal, close: closePaymentModal }] = useDisclosure(false);

  const cycleColorScheme = () => {
    if (colorScheme === "light") setColorScheme("dark");
    else if (colorScheme === "dark") setColorScheme("auto");
    else setColorScheme("light");
  };

  const handleSelectUser = (participantId: string) => {
    onSelectUser(participantId);
    closeModal();
  };

  return (
    <>
      <UserSelectionModal
        opened={modalOpened}
        participants={participants}
        onSelect={handleSelectUser}
        onClose={closeModal}
      />
      {currentUser && (
        <PaymentDetailsModal
          opened={paymentModalOpened}
          participant={currentUser}
          onClose={closePaymentModal}
        />
      )}
      <Menu
        width={200}
        position="bottom-end"
        radius="lg"
      >
        <Menu.Target>
          <UserAvatar size="md" style={{ cursor: "pointer" }}>
            {currentUser ? <Title order={3}>{currentUser.avatar.emoji}</Title> : <IconUserCircle size={16} />}
          </UserAvatar>
        </Menu.Target>

        <Menu.Dropdown>
          <Menu.Label>
            <Stack gap={0}>
              <Text size="xs" c="dimmed" lh={1}>
                Hello,
              </Text>
              <Text size="sm" fw={600} lh={1.4} c="var(--mantine-color-text)">
                {currentUser ? currentUser.name : "Choose user"}
              </Text>
            </Stack>
          </Menu.Label>

          <Menu.Divider />

          <Menu.Item
            leftSection={<IconUsers style={{ width: rem(14) }} />}
            onClick={openModal}
          >
            Switch user
          </Menu.Item>

          <Menu.Item
            leftSection={<IconCreditCard style={{ width: rem(14) }} />}
            onClick={openPaymentModal}
            disabled={!currentUser}
          >
            Payment details
          </Menu.Item>

          <Menu.Item
            leftSection={
              colorScheme === "light" ? (
                <IconMoonFilled style={{ width: rem(14) }} />
              ) : colorScheme === "dark" ? (
                <IconBrightnessAutoFilled style={{ width: rem(14) }} />
              ) : (
                <IconSunFilled style={{ width: rem(14) }} />
              )
            }
            onClick={cycleColorScheme}
          >
            {colorScheme === "light" ? "Dark mode" : colorScheme === "dark" ? "Auto mode" : "Light mode"}
          </Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </>
  );
};

export default UserDropdown;