Foundational Application Shell

1'use client'
2 
3import { Bell, Plus, Search } from 'lucide-react'
4 
5import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
8import { Input } from '@/components/ui/input'
9import { Separator } from '@/components/ui/separator'
10import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
11 
12import { AppShell1Sidebar } from './app-shell-1-sidebar'
13 
14const stats = [
15  ['Active projects', '12'],
16  ['Open tasks', '48'],
17  ['Team members', '16'],
18]
19 
20export function AppHeader() {
21  return (
22    <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4 sm:px-6">
23      <SidebarTrigger aria-label="Toggle navigation" className="min-h-11 min-w-11" />
24      <Separator orientation="vertical" className="data-vertical:h-5 data-vertical:self-center" />
25      <Breadcrumb>
26        <BreadcrumbList>
27          <BreadcrumbItem className="hidden sm:flex">Projects</BreadcrumbItem>
28          <BreadcrumbSeparator className="hidden sm:flex" />
29          <BreadcrumbItem>
30            <BreadcrumbPage>Overview</BreadcrumbPage>
31          </BreadcrumbItem>
32        </BreadcrumbList>
33      </Breadcrumb>
34      <div className="ml-auto hidden w-56 md:block">
35        <Input aria-label="Search workspace" placeholder="Search…" />
36      </div>
37      <Button variant="ghost" size="icon" aria-label="Notifications, 3 unread">
38        <Bell />
39        <span className="sr-only">3 unread</span>
40      </Button>
41    </header>
42  )
43}
44 
45export function AppContent() {
46  return (
47    <main className="flex flex-1 flex-col gap-6 p-4 sm:p-6">
48      <div className="flex items-center justify-between gap-4">
49        <div>
50          <h1 className="text-2xl font-semibold tracking-tight">Overview</h1>
51          <p className="text-sm text-muted-foreground">A clear view of your workspace.</p>
52        </div>
53        <Button>
54          <Plus data-icon="inline-start" />
55          New project
56        </Button>
57      </div>
58      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
59        {stats.map(([label, value]) => (
60          <Card key={label}>
61            <CardHeader>
62              <CardDescription>{label}</CardDescription>
63              <CardTitle className="text-3xl">{value}</CardTitle>
64            </CardHeader>
65          </Card>
66        ))}
67      </div>
68// … truncated