Dashboard Shell

1import * as React from "react";
2import {
3  Activity,
4  ArrowUpRight,
5  Bell,
6  Blocks,
7  ChartNoAxesCombined,
8  CreditCard,
9  Home,
10  Search,
11  Settings,
12  Sparkles,
13  Users,
14} from "lucide-react";
15 
16import { Avatar, AvatarFallback } from "@/components/ui/avatar";
17import { Badge } from "@/components/ui/badge";
18import { Button } from "@/components/ui/button";
19import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
20import { Input } from "@/components/ui/input";
21import { Progress } from "@/components/ui/progress";
22import { cn } from "@/lib/utils";
23 
24function DashboardShell01({
25  className,
26  ...props
27}: React.ComponentProps<"section">) {
28  return (
29    <section
30      className={cn(
31        "grid min-h-[720px] overflow-hidden rounded-[2rem] border border-foreground/10 bg-background lg:grid-cols-[220px_1fr]",
32        className,
33      )}
34      {...props}
35    >
36      <aside className="hidden border-r border-foreground/8 bg-foreground/[.02] p-4 lg:flex lg:flex-col">
37        <div className="flex items-center gap-2 px-2 py-2 font-semibold">
38          <span className="grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground">
39            <Sparkles className="size-4" />
40          </span>
41          Rivelle
42        </div>
43        <nav className="mt-7 space-y-1">
44          {[
45            [Home, "Overview"],
46            [Blocks, "Projects"],
47            [ChartNoAxesCombined, "Analytics"],
48            [Users, "Team"],
49            [CreditCard, "Billing"],
50          ].map(([Icon, label], index) => (
51            <a
52              className={cn(
53                "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground",
54                index === 0 && "bg-primary/10 text-primary",
55              )}
56              href="#"
57              key={String(label)}
58            >
59              {React.createElement(
60                Icon as React.ComponentType<{ className?: string }>,
61                { className: "size-4" },
62              )}
63              {String(label)}
64            </a>
65          ))}
66        </nav>
67        <a
68          className="mt-auto flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground"
69          href="#"
70        >
71          <Settings className="size-4" />
72          Settings
73        </a>
74      </aside>
75      <div className="min-w-0">
76        <header className="flex h-16 items-center gap-3 border-b border-foreground/8 px-5">
77// … truncated