60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T3299,'use client' import * as React from 'react' import { Bell, Building2, CreditCard, Palette, TriangleAlert, User } from 'lucide-react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { SectionCard } from '@/components/ui/section-card' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Separator } from '@/components/ui/separator' import { Switch } from '@/components/ui/switch' import { Textarea } from '@/components/ui/textarea' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog' type SectionId = 'profile' | 'notifications' | 'appearance' | 'workspace' | 'billing' | 'danger' export interface SettingsSection { id: SectionId label: string icon: React.ComponentType<{ className?: string }> } export interface SettingsPageProps { /** Override the nav. Ids must still match the built-in panels. */ sections?: SettingsSection[] /** Initially active section id. */ initialSection?: SectionId className?: string } const defaultSections: SettingsSection[] = [ { id: 'profile', label: 'Profile', icon: User }, { id: 'notifications', label: 'Notifications', icon: Bell }, { id: 'appearance', label: 'Appearance', icon: Palette }, { id: 'workspace', label: 'Workspace', icon: Building2 }, { id: 'billing', label: 'Billing', icon: CreditCard }, { id: 'danger', label: 'Danger zone', icon: TriangleAlert }, ] function ToggleRow({ title, description, checked, onCheckedChange, }: { title: string description: string checked: boolean onCheckedChange: (value: boolean) => void }) { return (

{title}

{description}

) } export function SettingsPage({ sections = defaultSections, initialSection = 'profile', className }: SettingsPageProps) { const [active, setActive] = React.useState(initialSection) const [notifyEmail, setNotifyEmail] = React.useState(true) const [notifyPush, setNotifyPush] = React.useState(false) const [notifyDigest, setNotifyDigest] = React.useState(true) const [themeChoice, setThemeChoice] = React.useState<'light' | 'dark' | 'system'>('system') const [deleteOpen, setDeleteOpen] = React.useState(false) const [deleteConfirm, setDeleteConfirm] = React.useState('') return (

{/* Nav rail */}

{sections.map((section) => { const Icon = section.icon const isActive = active === section.id return ( ) })}

{/* Content pane */}

{active === 'profile' && (

Display name

Bio

</div>
                  <div className="space-y-2">
                    <Label htmlFor="sp-role">Role</Label>
                    <Select defaultValue="editor">
                      <SelectTrigger id="sp-role" className="w-full sm:w-56">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="admin">Admin</SelectItem>
                        <SelectItem value="editor">Editor</SelectItem>
                        <SelectItem value="viewer">Viewer</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </SectionCard>
            </div>
            <div className="border-border flex items-center justify-end gap-2 border-t p-4">
              <Button variant="ghost" size="sm">
                Discard
              </Button>
              <Button size="sm">Save changes</Button>
            </div>
          </section>
        )}

{active === 'notifications' && (
          <section className="flex-1 p-6">
            <SectionCard title="Notifications" description="Choose what reaches you and where.">
              <ul className="-my-4 divide-y">
                <ToggleRow
                  title="Email notifications"
                  description="Mentions, assignments and approvals."
                  checked={notifyEmail}
                  onCheckedChange={setNotifyEmail}
                />
                <ToggleRow
                  title="Push notifications"
                  description="Real-time browser alerts while you work."
                  checked={notifyPush}
                  onCheckedChange={setNotifyPush}
                />
                <ToggleRow
                  title="Weekly digest"
                  description="A summary of everything, every Monday."
                  checked={notifyDigest}
                  onCheckedChange={setNotifyDigest}
                />
              </ul>
            </SectionCard>
          </section>
        )}

{active === 'appearance' && (
          <section className="flex-1 p-6">
            <SectionCard title="Appearance" description="Theme follows your system by default.">
              <div className="space-y-5">
                <div className="grid grid-cols-3 gap-3">
                  {(['light', 'dark', 'system'] as const).map((theme) => (
                    <button
                      key={theme}
                      type="button"
                      onClick={() => setThemeChoice(theme)}
                      className={cn(
                        'focus-visible:ring-ring rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',
                        themeChoice === theme ? 'border-primary ring-primary/20 ring-2' : 'hover:bg-accent/50',
                      )}
                    >
                      <span className="block text-sm font-medium capitalize">{theme}</span>
                      <span className="text-muted-foreground block text-xs">
                        {theme === 'light'
                          ? 'Bright surfaces'
                          : theme === 'dark'
                            ? 'Low-light friendly'
                            : 'Match device'}
                      </span>
                    </button>
                  ))}
                </div>
                <Separator />
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium">Reduced motion</p>
                    <p className="text-muted-foreground text-xs">Collapse animations to instant transitions.</p>
                  </div>
                  <Switch defaultChecked={false} aria-label="Toggle reduced motion" />
                </div>
              </div>
            </SectionCard>
          </section>
        )}

{active === 'workspace' && (
          <section className="flex-1 p-6">
            <SectionCard title="Workspace" description="Identity and defaults for everyone here.">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="sp-ws-name">Workspace name</Label>
                  <Input id="sp-ws-name" defaultValue="Acme Inc" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="sp-ws-url">URL slug</Label>
                  <div className="flex">
                    <span className="border-border bg-muted text-muted-foreground flex items-center rounded-l-md border px-3 font-mono text-xs">
                      acme.uipkge.app
                    </span>
                    <Input id="sp-ws-url" defaultValue="acme" className="rounded-l-none font-mono text-xs" />
                  </div>
                </div>
                <p className="text-muted-foreground text-xs">16 members · 4 pending invites</p>
              </div>
            </SectionCard>
          </section>
        )}

{active === 'billing' && (
          <section className="flex-1 p-6">
            <SectionCard title="Billing" description="Plan, seats and invoices.">
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-sm font-medium">Team plan · $12 / seat / month</p>
                  <p className="text-muted-foreground mt-1 text-xs">Next invoice Sep 1, 2026 · 18 seats</p>
                </div>
                <Button variant="outline" size="sm">
                  Manage billing
                </Button>
              </div>
            </SectionCard>
          </section>
        )}

{active === 'danger' && (
          <section className="flex-1 p-6">
            <div className="border-destructive/40 rounded-xl border p-6">
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-destructive text-sm font-medium">Delete this workspace</p>
                  <p className="text-muted-foreground mt-1 text-xs">
                    All projects, members and data will be permanently removed.
                  </p>
                </div>
                <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
                  Delete…
                </Button>
              </div>
            </div>
          </section>
        )}
      </div>

<Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>Delete workspace?</DialogTitle>
            <DialogDescription>
              This removes Acme Inc and all of its data for every member. This cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <Input
            value={deleteConfirm}
            onChange={(e) => setDeleteConfirm(e.target.value)}
            placeholder='Type "DELETE" to confirm'
          />
          <DialogFooter>
            <Button variant="outline" size="sm" onClick={() => setDeleteOpen(false)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              size="sm"
              disabled={deleteConfirm !== 'DELETE'}
              onClick={() => setDeleteOpen(false)}
            >
              Delete forever
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/dialog.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/label.json","https://uipkge.dev/r/react/section-card.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/switch.json","https://uipkge.dev/r/react/textarea.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/settings-page/SettingsPage.tsx","content":"$62","type":"registry:page","target":"~/components/blocks/SettingsPage.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>