Settings ui trial

app/components/settings.tsx

@@ -0,0 +1,55 @@
+import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useAuth } from "~/hooks/auth";
+
+export function Settings({
+    show,
+    setShow,
+}: {
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+}) {
+    const {user, loading, login, logout} = useAuth();
+    return (
+        <div>
+            <Modal isOpen={show}>
+                <Modal.Backdrop
+                    shouldCloseOnInteractOutside={(_element) => {
+                        setShow(false);
+                        return true;
+                    }}
+                >
+                    <Modal.Container>
+                        <Modal.Dialog>
+                            <Modal.CloseTrigger
+                                onPress={() => {
+                                    setShow(false);
+                                }}
+                            />
+                            <Modal.Header>
+                                <Modal.Heading>Account settings</Modal.Heading>
+                            </Modal.Header>
+                            <Modal.Body>
+                                <InputGroup>
+                                    <InputGroup.Prefix>Username</InputGroup.Prefix>
+                                    <InputGroup.Input defaultValue={user?.name}></InputGroup.Input>
+                                </InputGroup>
+                            </Modal.Body>
+                            <Modal.Footer>
+                                <Button
+                                    variant="secondary"
+                                    onPress={() => {
+                                        setShow(false);
+                                    }}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button>Save</Button>
+                            </Modal.Footer>
+                        </Modal.Dialog>
+                    </Modal.Container>
+                </Modal.Backdrop>
+            </Modal>
+        </div>
+    );
+}

app/components/user.tsx

@@ -7,11 +7,15 @@ import {
     Separator,
     Spinner,
 } from "@heroui/react";
-import type { PropsWithChildren } from "react";
+import { useState, type PropsWithChildren } from "react";
 import { useAuth } from "~/hooks/auth";
+import { Settings } from "./settings";
 
 export default function User({ children }: PropsWithChildren) {
     const { user, loading, login, logout } = useAuth();
+    const [showSettings, setShowSettings] = useState(false);
+
+    const toggleSettings = () => {setShowSettings(true)}
 
     if (loading) {
         return (
@@ -30,6 +34,8 @@ export default function User({ children }: PropsWithChildren) {
     }
 
     return (
+        <>
+        <Settings show={showSettings} setShow={setShowSettings}/>
         <Dropdown>
             <Button className="pr-0">
                 {children}
@@ -40,7 +46,7 @@ export default function User({ children }: PropsWithChildren) {
             </Button>
             <Dropdown.Popover>
                 <Dropdown.Menu
-                    onAction={(key) => handleAction(String(key), logout)}
+                    onAction={(key) => handleAction(String(key), logout, toggleSettings)}
                 >
                     <Dropdown.Item id="settings" textValue="Settings">
                         <Label>Settings</Label>
@@ -56,12 +62,13 @@ export default function User({ children }: PropsWithChildren) {
                 </Dropdown.Menu>
             </Dropdown.Popover>
         </Dropdown>
+        </>
     );
 }
 
-function handleAction(key: string, logout: () => Promise<void>) {
+function handleAction(key: string, logout: () => Promise<void>, toggleSettings: () => void) {
     if (key === "settings") {
-        console.log("settings");
+        toggleSettings();
     } else {
         logout();
     }