SettingsPage() — ui Function Reference

Architecture documentation for the SettingsPage() function in page.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SettingsPage() — ui Function Reference

Dependency Diagram

graph TD
  0ad01c64_b50f_1a78_0fb7_25bc990fb6dd["SettingsPage()"]
  b0a970a4_36a9_5983_bb33_06cc9a64b2bf["page.tsx"]
  0ad01c64_b50f_1a78_0fb7_25bc990fb6dd -->|defined in| b0a970a4_36a9_5983_bb33_06cc9a64b2bf
  style 0ad01c64_b50f_1a78_0fb7_25bc990fb6dd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(examples)/dashboard-03/settings/page.tsx lines 129–436

export default function SettingsPage() {
  return (
    <div className="@container/page flex flex-1 flex-col gap-8 p-6">
      <Tabs defaultValue="account" className="gap-6">
        <div
          data-slot="dashboard-header"
          className="flex items-center justify-between"
        >
          <TabsList>
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="security">Security</TabsTrigger>
            <TabsTrigger value="notifications">Notifications</TabsTrigger>
            <TabsTrigger value="privacy">Privacy</TabsTrigger>
          </TabsList>
        </div>
        <TabsContent value="account" className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Account Settings</CardTitle>
              <CardDescription>
                Make changes to your account here.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form id="form-account" className="@container">
                <FieldGroup>
                  <Field>
                    <Label htmlFor="name">Name</Label>
                    <FieldControl>
                      <Input
                        id="name"
                        placeholder="First and last name"
                        required
                      />
                    </FieldControl>
                    <FieldDescription>
                      This is your public display name.
                    </FieldDescription>
                  </Field>
                  <Field>
                    <Label htmlFor="email">Email</Label>
                    <FieldControl>
                      <Input
                        id="email"
                        placeholder="you@example.com"
                        required
                      />
                    </FieldControl>
                  </Field>
                  <Field>
                    <Label htmlFor="timezone">Timezone</Label>
                    <FieldControl>
                      <Select>
                        <SelectTrigger id="timezone">
                          <SelectValue placeholder="Select a timezone" />
                        </SelectTrigger>
                        <SelectContent>
                          {timezones.map((timezone) => (
                            <SelectGroup key={timezone.label}>
                              <SelectLabel>{timezone.label}</SelectLabel>
                              {timezone.timezones.map((time) => (
                                <SelectItem key={time.value} value={time.value}>
                                  {time.label}
                                </SelectItem>
                              ))}
                            </SelectGroup>
                          ))}
                        </SelectContent>
                      </Select>
                    </FieldControl>
                  </Field>
                </FieldGroup>
              </form>
            </CardContent>
            <CardFooter className="border-t">
              <Button type="submit" form="form-account" variant="secondary">
                Save changes
              </Button>
            </CardFooter>
          </Card>
          <Card>