114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import { DashboardShell, Sidebar, Header, type NavItem } from '@tree-e2e-1770173774/layout';
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
Badge,
|
|
Home,
|
|
Users,
|
|
Settings,
|
|
BarChart3,
|
|
} from '@tree-e2e-1770173774/ui';
|
|
|
|
const navItems: NavItem[] = [
|
|
{ label: 'Dashboard', href: '/', icon: Home, active: true },
|
|
{ label: 'Analytics', href: '/analytics', icon: BarChart3 },
|
|
{ label: 'Users', href: '/users', icon: Users, badge: '12' },
|
|
{ label: 'Settings', href: '/settings', icon: Settings },
|
|
];
|
|
|
|
function App() {
|
|
return (
|
|
<DashboardShell
|
|
sidebar={
|
|
<Sidebar
|
|
logo={
|
|
<span className="font-semibold text-lg">tree-e2e-1770173774</span>
|
|
}
|
|
items={navItems}
|
|
footer={
|
|
<div className="text-sm text-[var(--text-muted)]">
|
|
v0.0.1
|
|
</div>
|
|
}
|
|
/>
|
|
}
|
|
header={
|
|
<Header
|
|
title="Dashboard"
|
|
showSearch
|
|
searchPlaceholder="Search..."
|
|
/>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Welcome card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Welcome to web</CardTitle>
|
|
<CardDescription>
|
|
This is part of the{' '}
|
|
<code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded text-sm">
|
|
tree-e2e-1770173774
|
|
</code>{' '}
|
|
monorepo, using the shared UI library and layout components.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex gap-3">
|
|
<Button>Get Started</Button>
|
|
<Button variant="outline">Documentation</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Stats cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardDescription>Total Users</CardDescription>
|
|
<CardTitle className="text-3xl">1,234</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Badge variant="success">+12% from last month</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardDescription>Active Sessions</CardDescription>
|
|
<CardTitle className="text-3xl">567</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Badge variant="info">Live</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardDescription>API Requests</CardDescription>
|
|
<CardTitle className="text-3xl">89.2k</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Badge variant="warning">High traffic</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Edit hint */}
|
|
<p className="text-sm text-[var(--text-muted)]">
|
|
Edit this file at{' '}
|
|
<code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded">
|
|
apps/web/src/App.tsx
|
|
</code>
|
|
</p>
|
|
</div>
|
|
</DashboardShell>
|
|
);
|
|
}
|
|
|
|
export default App;
|