59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
LayoutGrid,
|
|
Settings,
|
|
Users,
|
|
BarChart,
|
|
Box,
|
|
} from "lucide-react";
|
|
import {
|
|
PageTemplate,
|
|
} from "@/components/layout/page-template";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
const SANDBOX_NAV_ITEMS = [
|
|
{ title: "Nav Item 1", icon: LayoutGrid, href: "#item1" },
|
|
{ title: "Nav Item 2", icon: Box, href: "#item2" },
|
|
{ title: "Nav Item 3", icon: Users, href: "#item3" },
|
|
{ title: "Nav Item 4", icon: Settings, href: "#item4" },
|
|
];
|
|
|
|
export default function SandboxPage() {
|
|
// Mock navigation items for the sidebar
|
|
const sidebarItems = SANDBOX_NAV_ITEMS.map((item) => ({
|
|
...item,
|
|
href: item.href,
|
|
isActive: item.title === "Nav Item 1", // Mock active state
|
|
badge: item.title === "Nav Item 2" ? "New" : undefined,
|
|
}));
|
|
|
|
return (
|
|
<PageTemplate
|
|
sidebar={{
|
|
items: sidebarItems,
|
|
customContent: (
|
|
<div className="space-y-4">
|
|
<div className="px-2 py-1 bg-dashed border border-dashed border-muted-foreground/30 rounded text-xs text-center text-muted-foreground uppercase tracking-wider">
|
|
Custom Component Area
|
|
</div>
|
|
|
|
{/* Mock Custom Component Example */}
|
|
<div className="space-y-2 opacity-70">
|
|
<h3 className="text-sm font-medium">Example Widget</h3>
|
|
<div className="p-3 rounded bg-muted/50 text-xs text-muted-foreground">
|
|
This area fills the remaining sidebar height and can hold any custom React component (checklists, filters, etc).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
}}
|
|
>
|
|
{/* Empty Main Content Area */}
|
|
<div className="border-2 border-dashed border-muted-foreground/20 rounded-lg h-[400px] flex items-center justify-center text-muted-foreground">
|
|
<p>Main Content Area (Empty)</p>
|
|
</div>
|
|
</PageTemplate>
|
|
);
|
|
}
|