An onboarding checklist of numbered, collapsible step cards where the next unfinished step stays open, completing a step stamps and folds it away, and a segmented progress bar tracks how many steps are done.
"use client";
import { QuickstartChecklist } from "@/components/ui/quickstart-checklist";
import { useState } from "react";
export default function QuickstartChecklistDarkDemo() {
const [note, setNote] = useState("");
const say = (text: string) => () => setNote(`Demo - ${text}`);
return (
<div className="flex min-h-full w-full justify-center px-4 py-12 sm:px-8 bg-[#1f1f1f]">
<div className="w-full max-w-[40rem]">
<QuickstartChecklist
title="Get Wally running"
theme="dark"
onComplete={say("all steps finished")}
steps={[
{
id: "token",
title: "Create an access token",
body: (
<p>
Tokens let your notebooks and scripts reach the Muscat
workspace. Keep it out of version control.
</p>
),
action: {
label: "Create token",
onClick: say("would open the token dialog"),
},
},
{
id: "load",
title: "Load your first file",
body: (
<p>
Drop a CSV or Parquet file, or attach a public bucket. Types
are inferred; you can change them before the table is made.
</p>
),
action: {
label: "Upload data",
onClick: say("would open the importer"),
},
},
{
id: "query",
title: "Run a query",
body: (
<p>
Open a notebook and try{" "}
<code>SELECT count(*) FROM rides</code>. Results stay in your
workspace.
</p>
),
action: {
label: "Open notebook",
onClick: say("would open a notebook"),
},
},
{
id: "invite",
title: "Invite a teammate",
body: (
<p>
Share the workspace with read or edit access. Invites expire
after seven days.
</p>
),
},
]}
/>
<p
role="status"
className="mt-5 min-h-[1.5em] font-[family-name:DM_Mono,ui-monospace,monospace] text-[12px] uppercase tracking-[0.04em] text-[#b9b2a9]"
>
{note}
</p>
</div>
</div>
);
}
