Loading preview...
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client"
import * as React from "react"
import {
PasteTable,
type PasteTableColumn,
} from "@/components/ui/honest-paste-table"
import { PasteTableSampleButton } from "@/components/ui/honest-paste-table-utils/registry-default-examples-paste-table-sample-button"
const columns: PasteTableColumn[] = [
{ key: "name", label: "Name", aliases: ["Full name"], required: true },
{
key: "email",
label: "Email",
aliases: ["E-mail"],
required: true,
validate: (value) =>
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value)) ? undefined : "Enter an email address, such as name@example.com",
},
{ key: "seats", label: "Seats", type: "number" },
{ key: "startDate", label: "Start date", type: "date", dateOrder: "mdy" },
]
// Sample clipboard rows, as a spreadsheet would copy them. Three cells are wrong on purpose.
const sampleRows = [
["Full name", "E-mail", "Seats", "Start date"],
["Ana Ruiz", "ana@northwind.example", "12", "3/4/2026"],
["Li Wei", "li.wei@northwind", "1,250", "03/18/2026"],
["Sam Cole", "sam@northwind.example", "five", "2026-04-01"],
["Dee Park", "dee@northwind.example", "3", "4/31/2026"],
]
/** Nothing leaves the page: the readout shows the rows `onImport` received. */
function PasteTableDemo() {
const [imported, setImported] = React.useState<Record<string, unknown>[] | null>(null)
return (
<div className="flex w-full max-w-3xl min-w-0 flex-col gap-[var(--hui-space-4)]">
<PasteTableSampleButton rows={sampleRows} />
<PasteTable aria-label="Import contacts" columns={columns} onImport={setImported} />
{imported && (
<p className="m-0 text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-mini)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]">
Last import: {imported.map((row) => `${row.name} (${row.startDate ?? "no start date"})`).join(", ")}.
</p>
)}
</div>
)
}
function SourceSpecimen(){return <PasteTableDemo/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}