8-bit Dashboard 01

1import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
2import { Suspense } from "react";
3import { DashboardHeader } from "@/components/dashboard-header";
4import { DataTable } from "@/components/data-table";
5import { SectionCards } from "@/components/section-cards";
6import ChartBarMultiple from "@/components/ui/8bit/blocks/chart-bar";
7import {
8  Card,
9  CardContent,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/8bit/card";
13import {
14  Sidebar,
15  SidebarContent,
16  SidebarGroup,
17  SidebarGroupContent,
18  SidebarGroupLabel,
19  SidebarInset,
20  SidebarMenu,
21  SidebarMenuButton,
22  SidebarMenuItem,
23  SidebarProvider,
24} from "@/components/ui/sidebar";
25 
26import data from "./data.json";
27 
28const items = [
29  {
30    title: "Home",
31    url: "#",
32    icon: Home,
33  },
34  {
35    title: "Inbox",
36    url: "#",
37    icon: Inbox,
38  },
39  {
40    title: "Calendar",
41    url: "#",
42    icon: Calendar,
43  },
44  {
45    title: "Search",
46    url: "#",
47    icon: Search,
48  },
49  {
50    title: "Settings",
51    url: "#",
52    icon: Settings,
53  },
54];
55 
56export default function Page() {
57  return (
58    <SidebarProvider
59      style={
60        {
61          "--sidebar-width": "calc(var(--spacing) * 72)",
62          "--header-height": "calc(var(--spacing) * 12)",
63        } as React.CSSProperties
64      }
65    >
66      <div className="flex h-screen w-full border">
67        <Sidebar className="retro border-foreground border-r-4 dark:border-ring">
68          <SidebarContent>
69            <SidebarGroup>
70              <SidebarGroupLabel>Application</SidebarGroupLabel>
71              <SidebarGroupContent>
72                <SidebarMenu>
73                  {items.map((item) => (
74                    <SidebarMenuItem key={item.title}>
75                      <SidebarMenuButton asChild>
76                        <a href={item.url}>
77                          <item.icon />
78                          <span>{item.title}</span>
79                        </a>
80                      </SidebarMenuButton>
81                    </SidebarMenuItem>
82                  ))}
83                </SidebarMenu>
84              </SidebarGroupContent>
85            </SidebarGroup>
86          </SidebarContent>
87        </Sidebar>
88        <SidebarInset>
89          <DashboardHeader />
90          <div className="flex flex-1 flex-col">
91            <div className="@container/main flex flex-1 flex-col gap-2">
92              <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
93                <SectionCards />
94                <div className="px-4 lg:px-6">
95// … truncated