import * as React from "react"
import { PinList } from "@/components/ui/pin-list"
const settings = {
maxPinned: 3,
showDescriptions: true,
pinnedLabel: "Pinned",
othersLabel: "All items",
emptyPinnedText: "Nothing pinned yet",
}
const items = [
{ id: "inbox", label: "Inbox", description: "Unread messages and mentions" },
{ id: "roadmap", label: "Roadmap", description: "Q4 planning board" },
{ id: "design", label: "Design system", description: "Tokens, components, docs" },
{ id: "billing", label: "Billing", description: "Invoices and subscriptions" },
{ id: "analytics", label: "Analytics", description: "Traffic and conversion" },
{ id: "settings", label: "Settings", description: "Workspace preferences" },
]
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="w-full max-w-md p-4">
<PinList
items={items}
defaultPinnedIds={["inbox"]}
maxPinned={s.maxPinned}
showDescriptions={s.showDescriptions}
pinnedLabel={s.pinnedLabel}
othersLabel={s.othersLabel}
emptyPinnedText={s.emptyPinnedText}
/>
</div>
)
}
