إطار التطبيق (AppShell)

npx @smicolon/fasla-ui@latest add app-shell

import type { ReactNode } from "react"
import { AppShell } from "@/components/blocks/app-shell"

const nav = [
  { label: "لوحة التحكم", href: "/dashboard" },
  { label: "الطلبات", href: "/orders" },
  { label: "الإعدادات", href: "/settings" },
]

export function AppLayout({ children }: { children: ReactNode }) {
  return (
    <AppShell
      sidebarWidth="md"
      sidebar={
        <div className="flex h-full flex-col">
          <div className="flex h-14 items-center border-b px-4">
            <span className="font-semibold">متجري</span>
          </div>
          <nav className="flex-1 space-y-1 p-2">
            {nav.map((item) => (
              <a key={item.href} href={item.href} className="flex rounded-md px-3 py-2 text-sm hover:bg-accent">
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      }
      header={
        <div className="flex h-14 items-center px-4">
          <span className="text-sm text-muted-foreground">مرحبًا بعودتك يا ليلى</span>
        </div>
      }
    >
      {children}
    </AppShell>
  )
}