Setup checklist

npx shadcn add @klarhimmel/app-onboarding-checklist

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import AppOnboardingChecklist from '@/components/klarhimmel/blocks/app-onboarding-checklist';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <AppOnboardingChecklist props={{
          "eyebrow": "Get started",
          "title": "Set up Exempelhotellet",
          "description": "Four steps and guests can book. You can come back to this list at any time.",
          "progress": {
            "label": "Setup progress",
            "of": "of",
            "suffix": "steps done"
          },
          "items": [
            {
              "title": "Add your first room",
              "description": "A name, a photo and a price per night.",
              "done": true
            },
            {
              "title": "Set your opening dates",
              "description": "Choose the weeks guests can book.",
              "done": true,
              "action": "Open calendar"
            },
            {
              "title": "Connect payments",
              "description": "So a booking can be paid for when it is made.",
              "done": false,
              "action": "Connect"
            },
            {
              "title": "Publish the booking page",
              "description": "Share one link, or put it on your own site.",
              "done": false
            }
          ],
          "complete": "Everything is set up. Guests can book now."
        }} />
      </BlockSurface>
    </Theme>
  );
}