Page Layout

import { Settings } from 'lucide-react'
import { Page, PageHeader, PageTitle, PageDescription, PageActions, PageBody } from '@otfdashkit/ui/layouts-page'

export function Example() {
  return (
    <div className="border border-[hsl(var(--border))] rounded-lg overflow-hidden min-h-[400px]">
      <Page>
        <PageHeader>
          <div>
            <PageTitle>Settings</PageTitle>
            <PageDescription>Manage your account and preferences.</PageDescription>
          </div>
          <PageActions>
            <button className="text-sm px-3 py-1.5 rounded-md border border-[hsl(var(--border))] text-[hsl(var(--foreground))]">Cancel</button>
            <button className="text-sm px-3 py-1.5 rounded-md bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]">Save changes</button>
          </PageActions>
        </PageHeader>
        <PageBody>
          <div className="max-w-lg space-y-4">
            {['Display Name', 'Email Address', 'Username'].map(field => (
              <div key={field}>
                <label className="text-sm font-medium text-[hsl(var(--foreground))]">{field}</label>
                <input className="mt-1 w-full px-3 py-2 text-sm rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))]" placeholder={`Enter ${field.toLowerCase()}`} />
              </div>
            ))}
          </div>
        </PageBody>
      </Page>
    </div>
  )
}