Dashboard Shell Block

1import { Bell, Home, LayoutGrid, Search, Settings, Users } from "lucide-react";
2 
3import { Avatar, AvatarFallback } from "@/components/ui/atoms/avatar";
4import { Badge } from "@/components/ui/atoms/badge";
5import { Button } from "@/components/ui/atoms/button";
6import { Card } from "@/components/ui/atoms/card";
7import { Input } from "@/components/ui/atoms/input";
8import {
9  Sidebar,
10  SidebarBranding,
11  SidebarContent,
12  SidebarFooter,
13  SidebarGroup,
14  SidebarGroupLabel,
15  SidebarHeader,
16  SidebarMenu,
17  SidebarMenuItem,
18  SidebarUserProfile,
19} from "@/components/ui/organisms/sidebar";
20 
21const shellNavigation = [
22  { label: "Overview", icon: Home, active: true },
23  { label: "Projects", icon: LayoutGrid },
24  { label: "Team", icon: Users },
25  { label: "Settings", icon: Settings },
26];
27 
28function DashboardShellBlock({ children }: { children?: React.ReactNode }) {
29  return (
30    <section
31      data-slot="dashboard-shell-block"
32      className="@container/shell min-h-[38rem] overflow-hidden rounded-xl border border-glass-border-outer bg-surface-subtle p-2 shadow-sm"
33    >
34      <div className="grid min-h-[37rem] grid-cols-1 overflow-hidden rounded-lg border border-border bg-background @lg/shell:grid-cols-[14rem_minmax(0,1fr)]">
35        <Sidebar
36          variant="inset"
37          className="hidden h-full w-full rounded-none border-0 border-r shadow-none @lg/shell:flex"
38        >
39          <SidebarHeader>
40            <SidebarBranding title="Northstar" subtitle="Product workspace" />
41          </SidebarHeader>
42          <SidebarContent>
43            <SidebarGroup>
44              <SidebarGroupLabel>Workspace</SidebarGroupLabel>
45              <SidebarMenu>
46                {shellNavigation.map(({ label, icon: Icon, active }) => (
47                  <SidebarMenuItem key={label} active={active} icon={<Icon className="size-4" />}>
48                    {label}
49                  </SidebarMenuItem>
50                ))}
51              </SidebarMenu>
52            </SidebarGroup>
53          </SidebarContent>
54          <SidebarFooter>
55            <SidebarUserProfile name="Poyraz Avsever" role="Administrator" initials="PA" />
56          </SidebarFooter>
57        </Sidebar>
58        <div className="min-w-0">
59          <header className="flex min-h-14 items-center gap-2 border-b border-border px-3 @sm/shell:px-5">
60            <div className="relative hidden flex-1 @sm/shell:block">
61              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
62// … truncated