| import { useState } from "react"; | |
| import { Grid3X3, LayoutGrid, Settings } from "lucide-react"; | |
| import { StatsCardComponent } from "./StatsCardComponent"; | |
| import { PlotComponent } from "./PlotComponent"; | |
| import { DataTableComponent } from "./DataTableComponent"; | |
| export function GenUIDashboard() { | |
| const [view, setView] = useState<"cards" | "table">("cards"); | |
| const stats = [ | |
| { title: "Active Users", value: 1243, trend: 12, icon: "👥" }, | |
| { title: "API Calls", value: "1.2M", trend: 8, icon: "📡" }, | |
| { title: "Response Time", value: "245ms", trend: -5, icon: "⏱️" }, | |
| ]; | |
| const tableColumns = [ | |
| { key: "name", label: "Name", sortable: true }, | |
| { key: "status", label: "Status", sortable: true }, | |
| { key: "lastActive", label: "Last Active", sortable: true }, | |
| ]; | |
| const tableData = [ | |
| { name: "Alice", status: "Active", lastActive: "2025-03-01" }, | |
| { name: "Bob", status: "Away", lastActive: "2025-02-28" }, | |
| { name: "Charlie", status: "Offline", lastActive: "2025-02-25" }, | |
| ]; | |
| return ( | |
| <div className="p-6 space-y-6"> | |
| <div className="flex justify-between items-center"> | |
| <h1 className="text-2xl font-bold">Generative UI Dashboard</h1> | |
| <div className="flex gap-2"> | |
| <button | |
| onClick={() => setView("cards")} | |
| className={`p-2 rounded ${view === "cards" ? "bg-primary/10 text-primary" : "text-gray-400"}`} | |
| title="Card view" | |
| > | |
| <Grid3X3 className="w-5 h-5" /> | |
| </button> | |
| <button | |
| onClick={() => setView("table")} | |
| className={`p-2 rounded ${view === "table" ? "bg-primary/10 text-primary" : "text-gray-400"}`} | |
| title="Table view" | |
| > | |
| <LayoutGrid className="w-5 h-5" /> | |
| </button> | |
| <button className="p-2 text-gray-400 hover:text-primary" title="Settings"> | |
| <Settings className="w-5 h-5" /> | |
| </button> | |
| </div> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| {stats.map(s => ( | |
| <StatsCardComponent key={s.title} title={s.title} value={s.value} trend={s.trend} icon={s.icon} /> | |
| ))} | |
| </div> | |
| {view === "cards" ? ( | |
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> | |
| <PlotComponent title="Usage Trends" /> | |
| <PlotComponent type="bar" title="Weekly Activity" /> | |
| </div> | |
| ) : ( | |
| <DataTableComponent columns={tableColumns} data={tableData} /> | |
| )} | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 2.53 kB
- Xet hash:
- 3fcf3b07374ddd7c8bfb56d1dd034d2921a1d04edd29de2a811feeb861bda187
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.