Porning/app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamped settings ui

Browse Source
This commit is contained in:
AINDUSTRIES
2026-07-30 00:55:44 +02:00
parent e45036dec3
commit 028ea11c18
1 changed files with 65 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/components/settings.tsx
View File

@@ -1,4 +1,15 @@
import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
import {
Modal,
Button,
InputGroup,
Input,
TextField,
Form,
Fieldset,
Description,
Label,
Typography,
} from "@heroui/react";
import type { Dispatch, SetStateAction } from "react";
import { useAuth } from "~/hooks/auth";
@@ -9,43 +20,76 @@ export function Settings({
show: boolean;
setShow: Dispatch<SetStateAction<boolean>>;
}) {
const {user, loading, login, logout} = useAuth();
const { user, loading, login, logout } = useAuth();
return (
<div>
<Modal isOpen={show}>
<Modal.Backdrop
variant="blur"
shouldCloseOnInteractOutside={(_element) => {
setShow(false);
return true;
}}
>
<Modal.Container>
<Modal.Container size="lg">
<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>
<Form className="w-full">
<Fieldset>
<Typography.Heading level={3}>
Account settings.
</Typography.Heading>
<Typography.Paragraph size="sm">
Update your profile information
either manually or from Steam.{" "}
<br />
Change several settings concerning
some functionnalities of the app.
</Typography.Paragraph>
<Fieldset.Group>
<TextField name="username">
<Label>Username</Label>
<Input
placeholder={user?.name}
variant="secondary"
></Input>
</TextField>
<TextField name="avatar">
<Label>Avatar URL</Label>
<Input
placeholder={user?.avatar}
variant="secondary"
></Input>
<Description>
The URL must be a valid
image url.
</Description>
</TextField>
</Fieldset.Group>
<Fieldset.Actions className="flex justify-end">
<div className="flex-1">
<Button variant="tertiary">
Load from Steam
</Button>
</div>
<Button
variant="secondary"
onPress={() => {
setShow(false);
}}
>
Cancel
</Button>
<Button type="submit">Save</Button>
</Fieldset.Actions>
</Fieldset>
</Form>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onPress={() => {
setShow(false);
}}
>
Cancel
</Button>
<Button>Save</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>