form-3

1import { AtSign, EyeIcon, LockIcon, PhoneIcon } from "lucide-react";
2import { Button } from "@/components/ui/button";
3import { ButtonGroup } from "@/components/ui/button-group";
4import {
5  Field,
6  FieldContent,
7  FieldDescription,
8  FieldGroup,
9  FieldLabel,
10  FieldLegend,
11  FieldSeparator,
12  FieldSet,
13} from "@/components/ui/field";
14import { Input } from "@/components/ui/input";
15import {
16  InputGroup,
17  InputGroupAddon,
18  InputGroupButton,
19  InputGroupInput,
20} from "@/components/ui/input-group";
21 
22export function SettingsForm() {
23  return (
24    <div className="mx-auto w-full max-w-4xl">
25      <FieldSet>
26        <FieldLegend className="text-4xl">Account Settings</FieldLegend>
27        <FieldDescription>
28          Manage account and your personal information.
29        </FieldDescription>
30        <FieldSeparator />
31        <FieldGroup className="gap-5">
32          <div className="rounded-xl border border-border/60 p-0.5">
33            <Field
34              className="rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50"
35              orientation="responsive"
36            >
37              <FieldContent>
38                <FieldLabel htmlFor="name">Your Name</FieldLabel>
39                <FieldDescription>
40                  Please enter a display name you are comfortable with.
41                </FieldDescription>
42              </FieldContent>
43              <FieldContent>
44                <ButtonGroup className="w-full">
45                  <Input id="name" placeholder="Enter Your Name" />
46                  <Button variant="outline">Save</Button>
47                </ButtonGroup>
48                <FieldDescription>Max 32 characters</FieldDescription>
49              </FieldContent>
50            </Field>
51          </div>
52          <div className="rounded-xl border border-border/60 p-0.5">
53            <Field
54              className="rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50"
55              orientation="responsive"
56            >
57              <FieldContent>
58                <FieldLabel htmlFor="lastName">Your Email</FieldLabel>
59                <FieldDescription>
60                  Please enter a valid email address.
61                </FieldDescription>
62              </FieldContent>
63              <FieldContent>
64                <ButtonGroup className="w-full">
65                  <InputGroup>
66                    <InputGroupAddon>
67                      <AtSign />
68                    </InputGroupAddon>
69                    <InputGroupInput
70// … truncated