35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
type SavedDashboard = {
|
|
datasetId: string;
|
|
description: string;
|
|
id: string;
|
|
label: string;
|
|
};
|
|
|
|
type SavedDashboardListProps = {
|
|
dashboards: readonly SavedDashboard[];
|
|
onOpen: (datasetId: string) => void;
|
|
};
|
|
|
|
export function SavedDashboardList({ dashboards, onOpen }: SavedDashboardListProps) {
|
|
return (
|
|
<section className="rounded-[2rem] border border-border bg-card p-6">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-foreground/50">Saved Views</p>
|
|
<h2 className="mt-2 text-2xl font-semibold">Operator Dashboards</h2>
|
|
</div>
|
|
<div className="mt-6 grid gap-4">
|
|
{dashboards.map((dashboard) => (
|
|
<button
|
|
className="rounded-[1.5rem] border border-border/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.74),rgba(240,236,227,0.98))] p-4 text-left"
|
|
key={dashboard.id}
|
|
onClick={() => onOpen(dashboard.datasetId)}
|
|
type="button"
|
|
>
|
|
<p className="text-sm font-semibold">{dashboard.label}</p>
|
|
<p className="mt-2 text-sm text-foreground/70">{dashboard.description}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|