A row of named filter/sort/column presets above a table or list, with an explicit unsaved-changes state so users can save over, save as new, or discard changes to the view they're on.
"use client";
import SavedViews, { type SavedView } from "@/components/ui/saved-views";
import { useState } from "react";
const INITIAL_VIEWS: SavedView[] = [
{ id: "all", name: "All deals", count: 312, locked: true },
{ id: "open", name: "My open deals", count: 24, shared: true },
{ id: "churn", name: "Churn risk", count: 7 },
{ id: "closed", name: "Closed this quarter", count: 41 },
];
export default function SavedViewsCleanSelectionDemo() {
const [views, setViews] = useState<SavedView[]>(INITIAL_VIEWS);
const [value, setValue] = useState("churn");
return (
<div className="w-full max-w-xl rounded-xl border bg-background p-5">
<SavedViews
views={views}
value={value}
onValueChange={setValue}
onDelete={(view) => {
setViews((prev) => prev.filter((v) => v.id !== view.id));
setValue("all");
}}
/>
</div>
);
}
