this repo has no description
feat(settings): refactor
+37
-21
+37
-21
src/app/settings/page.tsx
+37
-21
src/app/settings/page.tsx
···
4
4
import { HugeiconsIcon } from "@hugeicons/react";
5
5
import Link from "next/link";
6
6
import { Button } from "@/components/ui/button";
7
-
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
7
+
import { ButtonGroup } from "@/components/ui/button-group";
8
+
import {
9
+
Card,
10
+
CardAction,
11
+
CardContent,
12
+
CardDescription,
13
+
CardHeader,
14
+
CardTitle,
15
+
} from "@/components/ui/card";
8
16
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
9
17
import { Input } from "@/components/ui/input";
10
18
import { authClient } from "@/lib/auth-client";
···
44
52
};
45
53
46
54
return (
47
-
<Card className="ring-0">
55
+
<Card>
48
56
<CardHeader>
49
-
<Button variant="secondary" size="icon" render={<Link href="/" />}>
50
-
<HugeiconsIcon icon={ArrowLeft01Icon} />
51
-
</Button>
52
57
<CardTitle>Settings</CardTitle>
58
+
<CardDescription>
59
+
Manage your account settings and preferences.
60
+
</CardDescription>
61
+
<CardAction>
62
+
<ButtonGroup>
63
+
<Button render={<Link href="/" />} nativeButton={false}>
64
+
<HugeiconsIcon icon={ArrowLeft01Icon} />
65
+
Back
66
+
</Button>
67
+
<Button variant="destructive" onClick={() => authClient.signOut()}>
68
+
<HugeiconsIcon icon={Logout01Icon} />
69
+
Logout
70
+
</Button>
71
+
</ButtonGroup>
72
+
</CardAction>
53
73
</CardHeader>
54
74
<CardContent>
55
75
<form onSubmit={handleSave}>
56
76
<FieldGroup>
57
77
<Field>
58
-
<FieldLabel htmlFor="picture">Picture</FieldLabel>
59
-
<Input id="picture" type="file" name="picture" accept="image/*" />
78
+
<FieldLabel htmlFor="avatar">Avatar</FieldLabel>
79
+
<Input id="avatar" type="file" name="avatar" accept="image/*" />
60
80
</Field>
61
81
<Field>
62
82
<FieldLabel>Name</FieldLabel>
63
-
<Input defaultValue={user.name} name="name" />
83
+
<Input defaultValue={user.name} name="name" required />
64
84
</Field>
65
85
<Field>
66
86
<FieldLabel>Email</FieldLabel>
67
-
<Input defaultValue={user.email} name="email" />
87
+
<Input
88
+
defaultValue={user.email}
89
+
name="email"
90
+
type="email"
91
+
required
92
+
/>
93
+
</Field>
94
+
<Field>
95
+
<Button type="submit">Save Changes</Button>
68
96
</Field>
69
-
<Button className="w-full" type="submit">
70
-
Save Changes
71
-
</Button>
72
-
<Button
73
-
variant="destructive"
74
-
className="w-full"
75
-
render={<Link href="/auth" />}
76
-
onClick={() => authClient.signOut()}
77
-
>
78
-
<HugeiconsIcon icon={Logout01Icon} className="me-2" />
79
-
Logout
80
-
</Button>
81
97
</FieldGroup>
82
98
</form>
83
99
</CardContent>