Components
Loading preview...
Appshell component from Efferdui
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/appshell
import AppShell from "@/components/ui/appshell";
import { LayoutGridIcon } from "lucide-react";
export default function DemoOne() {
return (
<AppShell
currentPage={{
title: "Dashboard",
icon: <LayoutGridIcon className="size-3.5" />,
}}
>
{/* Имитация контента дашборда */}
<div className="flex flex-col gap-4">
<h1 className="text-xl font-semibold leading-tight">
Welcome back, Shaban!
</h1>
<p className="text-sm text-muted-foreground">Let's get things done.</p>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="rounded-lg border bg-card p-4">
<p className="text-xs text-muted-foreground">Active users</p>
<p className="mt-2 text-xl font-medium tabular-nums">847</p>
</div>
<div className="rounded-lg border bg-card p-4">
<p className="text-xs text-muted-foreground">Revenue</p>
<p className="mt-2 text-xl font-medium tabular-nums">$18,290</p>
</div>
<div className="rounded-lg border bg-card p-4">
<p className="text-xs text-muted-foreground">Conversion</p>
<p className="mt-2 text-xl font-medium tabular-nums">3.28%</p>
</div>
</div>
<div className="rounded-lg border bg-card p-6">
<p className="text-sm text-muted-foreground">
Page content goes here. AppShell handles sidebar, header,
breadcrumbs, and layout.
</p>
</div>
</div>
</AppShell>
);
}