### Define Getting Started Steps Data (TypeScript)

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-02.mdx

This TypeScript array defines the structured data for each step in a user onboarding or setup flow. Each object contains an `id`, `title`, `description`, and `status` ('complete' or 'open'), which are used to dynamically render the progress list in the UI.

```TypeScript
const steps = [
  {
    "id": "1.",
    "title": "Set up your organization",
    "description":
      "You successfully created your account. You can edit your account details anytime.",
    "status": "complete"
  },
  {
    "id": "2.",
    "title": "Connect to data source",
    "description":
      "The platform supports more than 50 databases and data warehouses.",
    "status": "open"
  },
  {
    "id": "3.",
    "title": "Create metrics",
    "description": "Create metrics using custom SQL or our intuitive query mask.",
    "status": "open"
  },
  {
    "id": "4.",
    "title": "Create report",
    "description":
      "Transform metrics into visualizations and arrange them visually.",
    "status": "open"
  }
];
```

--------------------------------

### React Getting Started Progress Flow Component

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-03.mdx

This TSX component renders a 'Getting Started' section, guiding users through a series of predefined steps. It utilizes a `ProgressBar` component to visually indicate overall progress and displays individual steps with their status (complete or open), descriptions, and clickable links. Completed steps are marked with a checkmark icon, while open steps show their numerical ID. It also includes a contact section for support.

```tsx
// 'use client';

import { RiCheckboxCircleFill } from '@remixicon/react';

import { ProgressBar } from '@/components/ProgressBar';

const steps = [
  //array-start
  {
    id: '1.',
    title: 'Set up your organization',
    description:
      'You successfully created your account. You can edit your account details anytime.',
    status: 'complete',
    href: '#',
  },
  {
    id: '2.',
    title: 'Connect to data source',
    description:
      'The platform supports more than 50 databases and data warehouses.',
    status: 'open',
    href: '#',
  },
  {
    id: '3.',
    title: 'Create metrics',
    description: 'Create metrics using custom SQL or our intuitive query mask.',
    status: 'open',
    href: '#',
  },
  {
    id: '4.',
    title: 'Create report',
    description:
      'Transform metrics into visualizations and arrange them visually.',
    status: 'open',
    href: '#',
  },
  //array-end
];

export default function Example() {
  return (
    <>
      <div className="sm:mx-auto sm:max-w-lg">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
          Getting started
        </h3>
        <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
          Follow the steps to set up your workspace. This allows you to create
          your first dashboard.
        </p>
        <div className="mt-4 flex items-center justify-end space-x-4">
          <span className="text-sm text-gray-500 dark:text-gray-500">
            Step 1/{steps.length}
          </span>
          <ProgressBar value={25} showAnimation={false} className="w-32" />
        </div>
        <ul role="list" className="mt-4 space-y-4">
          {steps.map((step) => (
            <li
              key={step.id}
              className="relative rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-800 dark:bg-gray-950"
            >
              <div className="flex items-start space-x-3">
                {step.status === 'complete' ? (
                  <RiCheckboxCircleFill
                    className="size-6 shrink-0 text-blue-500 dark:text-blue-500"
                    aria-hidden={true}
                  />
                ) : (
                  <span
                    className="flex size-6 items-center justify-center font-medium text-gray-500 dark:text-gray-500"
                    aria-hidden={true}
                  >
                    {step.id}
                  </span>
                )}
                <div>
                  <h3 className="font-medium text-gray-900 dark:text-gray-50">
                    <a href={step.href} className="focus:outline-none">
                      {/* extend link to entire card */}
                      <span className="absolute inset-0" aria-hidden={true} />
                      {step.title}
                    </a>
                  </h3>
                  <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
                    {step.description}
                  </p>
                </div>
              </div>
            </li>
          ))}
        </ul>
        <div className="mt-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-900">
          <h4 className="text-sm font-medium text-gray-900 dark:text-gray-50">
            Need help?
          </h4>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-500">
            Connect with a member of our team at{' '}
            <a
              href="mailto:support@company.com"
              className="font-medium text-blue-500 dark:text-blue-500"
            >
              support@company.com
            </a>
            .
          </p>
        </div>
      </div>
    </>
  );
}
```

--------------------------------

### React Component for Multi-Step Getting Started UI (TSX)

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-02.mdx

This React functional component (`Example`) renders a user interface for a multi-step 'getting started' process. It iterates over the `steps` array (defined elsewhere), displaying each step's title and description, and dynamically shows a completion icon or step number based on its status. The component also includes basic navigation buttons and uses Tremor Blocks components for styling.

```TSX
// 'use client';

import { RiCheckboxCircleFill } from '@remixicon/react';

import { Button } from '@/components/Button';

// const steps = [...] // This array is defined separately but used here.

export default function Example() {
  return (
    <>
      <div className="sm:mx-auto sm:max-w-lg">
        <h3 className="dark:text-gary-50 text-lg font-semibold text-gray-900">
          Getting started
        </h3>
        <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
          Follow the steps to set up your workspace. This allows you to create
          your first dashboard.
        </p>
        <ul className="mt-6 space-y-4">
          {steps.map((step) => (
            <li
              key={step.id}
              className="rounded-lg border border-gray-300 bg-white p-4 dark:border-gray-800 dark:bg-gray-950"
            >
              <div className="flex items-start space-x-3">
                {step.status === 'complete' ? (
                  <RiCheckboxCircleFill
                    className="size-6 shrink-0 text-blue-500 dark:text-blue-500"
                    aria-hidden={true}
                  />
                ) : (
                  <span
                    className="flex size-6 items-center justify-center font-medium text-gray-500 dark:text-gray-500"
                    aria-hidden={true}
                  >
                    {step.id}
                  </span>
                )}
                <div>
                  <h3 className="font-medium text-gray-900 dark:text-gray-50">
                    {step.title}
                  </h3>
                  <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
                    {step.description}
                  </p>
                </div>
              </div>
            </li>
          ))}
        </ul>
        <div className="mt-6 flex items-center justify-end space-x-4">
          <Button variant="ghost">Back</Button>
          <Button>Continue</Button>
        </div>
      </div>
    </>
  );
}
```

--------------------------------

### Render Dynamic Onboarding Accordion Component in TSX

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-04.mdx

This snippet defines the main `Example` React component, which renders the "Getting Started" UI. It imports necessary icons and Tremor components, then iterates over the `steps` array. For each step, it conditionally renders an `AccordionItem` with different styling and content based on the `step.status`. This includes displaying a checkmark for 'complete' steps and a circular placeholder for 'current' steps, along with relevant descriptions and a disabled button.

```tsx
// 'use client';

import {
  RiCalculatorLine,
  RiCheckboxCircleFill,
  RiDatabase2Line,
  RiFileChartLine,
  RiSoundModuleLine,
} from '@remixicon/react';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/Accordion';
import { Button } from '@/components/Button';

const steps = [
  //array-start
  {
    title: 'Sign up and create workspace',
    subtitle: 'Account created',
    icon: RiSoundModuleLine,
    description:
      'You successfully created your account. Edit your account details anytime.',
    buttonText: 'Edit account',
    status: 'complete',
  },
  {
    title: 'Connect to data source',
    subtitle: 'Create connection',
    icon: RiDatabase2Line,
    description:
      'Connect to a data source. The platform supports more than 50 databases.',
    buttonText: 'Connect data source',
    status: 'current',
  },
  {
    title: 'Create metrics',
    subtitle: 'Create a metric',
    icon: RiCalculatorLine,
    description: 'Create metrics using custom SQL or our intuitive query mask.',
    buttonText: 'Create metric',
    status: 'upcoming',
  },
  {
    title: 'Create report',
    subtitle: 'Create a report',
    icon: RiFileChartLine,
    description:
      'Transform metrics into visualizations and arrange them visually with our report builder.',
    buttonText: 'Create report',
    status: 'upcoming',
  },
  //array-end
];

export default function Example() {
  return (
    <>
      <div className="sm:mx-auto sm:max-w-lg">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
          Getting started
        </h3>
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-500">
          Follow the steps to set up your workspace
        </p>
        <Accordion
          type="multiple"
          defaultValue={['Connect to data source']}
          className="mt-6 space-y-2"
        >
          {steps.map((step) =>
            step.status === 'complete' ? (
              <AccordionItem
                value={step.title}
                key={step.title}
                className="rounded-md border !border-gray-300 px-4 !shadow-sm dark:border-gray-800"
              >
                <AccordionTrigger>
                  <div className="flex items-center space-x-2">
                    {/* Additional span wrapper for icon to align it with icons in other accordions */}
                    <span
                      className="flex size-5 items-center justify-center"
                      aria-hidden={true}
                    >
                      <RiCheckboxCircleFill
                        className="size-6 shrink-0 text-emerald-500"
                        aria-hidden={true}
                      />
                    </span>
                    <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
                      {step.title}
                    </p>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="pb-4 pt-2">
                  <div className="flex items-center justify-center rounded-md bg-gray-50 px-4 py-5 ring-1 ring-inset ring-gray-200 dark:bg-gray-900 dark:ring-gray-800">
                    <div className="max-w-xs text-center">
                      {/* custom color used to optimize this edge case */}
                      <step.icon
                        className="mx-auto size-7 shrink-0 text-gray-300 dark:text-gray-700"
                        aria-hidden={true}
                      />
                      <p className="mt-4 text-sm font-semibold text-gray-400 dark:text-gray-600">
                        {step.subtitle}
                      </p>
                      <p className="mt-1 text-sm text-gray-400 dark:text-gray-600">
                        {step.description}
                      </p>
                      <Button className="mt-6" variant="secondary" disabled>
                        {step.buttonText}
                      </Button>
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            ) : step.status === 'current' ? (
              <AccordionItem
                value={step.title}
                key={step.title}
                className="rounded-md border !border-gray-300 px-4 !shadow-sm dark:border-gray-800"
              >
                <AccordionTrigger>
                  <div className="flex items-center space-x-2">
                    <span
                      className="size-5 shrink-0 rounded-full border border-gray-200 dark:border-gray-800"
                      aria-hidden={true}
                    />
                    <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
                      {step.title}
                    </p>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="pb-4 pt-2">

```

--------------------------------

### Render Dynamic Setup Wizard Steps (React/TypeScript)

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-01.mdx

This React functional component (`Example`) renders a list of setup steps dynamically based on their 'type' property. It uses conditional rendering to display different UI elements (icons, buttons) for 'done', 'in progress', and 'open' steps, providing a visual representation of the user's progress through a setup flow. It integrates with Remixicon for icons and a custom Button component.

```tsx
// 'use client';

import {
  RiCheckboxBlankCircleLine,
  RiCheckboxCircleFill,
  RiDatabase2Line,
} from '@remixicon/react';

import { Button } from '@/components/Button';

const steps = [
  {
    id: 1,
    type: 'done',
    title: 'Sign in with your account',
    description:
      'To get started, log in with your organization account from your company.',
    href: '#',
  },
  {
    id: 2,
    type: 'in progress',
    title: 'Import data',
    description:
      'Connect your database to the new workspace by using one of 20+ database connectors.',
    href: '#',
  },
  {
    id: 3,
    type: 'open',
    title: 'Create your first report',
    description:
      'Generate your first report by using our pre-built templates or easy-to-use report builder.',
    href: '#',
  }
];

export default function Example() {
  return (
    <>
      <div className="sm:mx-auto sm:max-w-lg">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
          Hello, Maxime
        </h3>
        <p className="text-sm text-gray-500 dark:text-gray-500">
          Let's set up your first data workspace
        </p>
        <ul role="list" className="mt-8 space-y-3">
          {steps.map((step) =>
            step.type === 'done' ? (
              <li key={step.id} className="relative p-4">
                <div className="flex items-start">
                  <RiCheckboxCircleFill
                    className="size-6 shrink-0 text-blue-500 dark:text-blue-500"
                    aria-hidden={true}
                  />
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="font-medium leading-5 text-gray-900 dark:text-gray-50">
                      <a href={step.href} className="focus:outline-none">
                        {/* extend link to entire list card */}
                        <span className="absolute inset-0" aria-hidden={true} />
                        {step.title}
                      </a>
                    </p>
                    <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
                      {step.description}
                    </p>
                  </div>
                </div>
              </li>
            ) : step.type === 'in progress' ? (
              <li
                key={step.id}
                className="rounded-lg bg-gray-50 p-4 dark:bg-gray-900"
              >
                <div className="flex items-start">
                  <RiCheckboxBlankCircleLine
                    className="size-6 shrink-0 text-blue-500 dark:text-blue-500"
                    aria-hidden={true}
                  />
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="font-medium leading-5 text-gray-900 dark:text-gray-50">
                      {step.title}
                    </p>
                    <p className="mt-1 text-sm/6 text-gray-500 dark:text-gray-500">
                      {step.description}
                    </p>
                    <Button className="mt-4 gap-1.5">
                      <RiDatabase2Line
                        className="-ml-0.5 size-5 shrink-0"
                        aria-hidden={true}
                      />
                      Connect database
                    </Button>
                  </div>
                </div>
              </li>
            ) : (
              <li key={step.id} className="relative p-4">
                <div className="flex items-start">
                  <RiCheckboxBlankCircleLine
                    className="size-6 shrink-0 text-gray-400 dark:text-gray-600"
                    aria-hidden={true}
                  />
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="font-medium leading-5 text-gray-400 dark:text-gray-600">
                      <a href={step.href} className="focus:outline-none">
                        {/* extend link to entire list card */}
                        <span className="absolute inset-0" aria-hidden={true} />
                        {step.title}
                      </a>
                    </p>
                    <p className="mt-1 text-sm/6 text-gray-400 dark:text-gray-600">
                      {step.description}
                    </p>
                  </div>
                </div>
              </li>
            ),
          )}
        </ul>
      </div>
    </>
  );
}
```

--------------------------------

### Define Onboarding Steps Data Structure in TSX

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-04.mdx

This snippet defines the `steps` array, a crucial data structure for the "Getting Started" component. Each object in the array represents a distinct step in the onboarding process, containing properties like `title`, `subtitle`, `icon` (a Remixicon component), `description`, `buttonText`, and `status`. The `status` property (`complete`, `current`, `upcoming`) dictates how each step is rendered in the UI.

```tsx
const steps = [
  //array-start
  {
    title: 'Sign up and create workspace',
    subtitle: 'Account created',
    icon: RiSoundModuleLine,
    description:
      'You successfully created your account. Edit your account details anytime.',
    buttonText: 'Edit account',
    status: 'complete',
  },
  {
    title: 'Connect to data source',
    subtitle: 'Create connection',
    icon: RiDatabase2Line,
    description:
      'Connect to a data source. The platform supports more than 50 databases.',
    buttonText: 'Connect data source',
    status: 'current',
  },
  {
    title: 'Create metrics',
    subtitle: 'Create a metric',
    icon: RiCalculatorLine,
    description: 'Create metrics using custom SQL or our intuitive query mask.',
    buttonText: 'Create metric',
    status: 'upcoming',
  },
  {
    title: 'Create report',
    subtitle: 'Create a report',
    icon: RiFileChartLine,
    description:
      'Transform metrics into visualizations and arrange them visually with our report builder.',
    buttonText: 'Create report',
    status: 'upcoming',
  },
  //array-end
];
```

--------------------------------

### React Component for Workspace Setup Progress UI

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-07.mdx

A React functional component, `Example`, that renders a comprehensive user interface for tracking and displaying workspace setup progress. It utilizes `Card` and `Tabs` components to organize 'Updates' (progress steps) and 'Details' sections. The component dynamically renders step status using icons and conditional styling, and includes a call-to-action button.

```TSX
export default function Example() {
  return (
    <>
      <div className="sm:mx-auto sm:max-w-xl">
        <Card>
          <h3 className="font-medium text-gray-900 dark:text-gray-50">
            Workspace setup
          </h3>
          <Tabs defaultValue="tab1" className="mt-4">
            <TabsList className="w-full" variant="solid">
              <TabsTrigger value="tab1" className="w-full">
                Updates
              </TabsTrigger>
              <TabsTrigger value="tab2" className="w-full">
                Details
              </TabsTrigger>
            </TabsList>
            <TabsContent value="tab1">
              <ul role="list" className="mt-6 space-y-6">
                {steps.map((step, stepindex) => (
                  <li key={step.id} className="relative flex gap-x-3">
                    <div
                      className={cx(
                        stepindex === steps.length - 1 ? 'h-6' : '-bottom-6',
                        'absolute left-0 top-0 flex w-6 justify-center',
                      )}
                    >
                      <span
                        className="w-px bg-gray-200 dark:bg-gray-700"
                        aria-hidden={true}
                      />
                    </div>
                    <div className="flex items-start space-x-2.5">
                      <div className="relative flex size-6 flex-none items-center justify-center bg-white dark:bg-[#090E1A]">
                        {step.type === 'done' ? (
                          <RiCheckLine
                            className="size-5 text-blue-500 dark:text-blue-500"
                            aria-hidden={true}
                          />
                        ) : step.type === 'in progress' ? (
                          <div
                            className="size-2.5 rounded-full bg-blue-500 ring-4 ring-white dark:bg-blue-500 dark:ring-[#090E1A]"
                            aria-hidden={true}
                          />
                        ) : (
                          <div
                            className="size-3 rounded-full border border-gray-200 bg-white ring-4 ring-white dark:border-gray-800 dark:bg-[#090E1A] dark:ring-[#090E1A]"
                            aria-hidden={true}
                          />
                        )}
                      </div>
                      <div>
                        <p className="mt-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
                          {step.title}{' '}
                          <span className="font-normal text-gray-400 dark:text-gray-600">
                            &#8729; {step.activityTime}
                          </span>
                        </p>
                        <p className="mt-0.5 text-sm/6 text-gray-500 dark:text-gray-500">
                          {step.description}
                        </p>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
              <Button asChild className="mt-6 h-10 w-full">
                <a href="#" className="inline-flex items-center gap-1.5">
                  <RiNotification2Line
                    className="-ml-0.5 size-5 shrink-0"
                    aria-hidden={true}
                  />
                  Notify me when completed
                </a>
              </Button>
            </TabsContent>
            <TabsContent value="tab2">
              <h4 className="mt-6 text-xs font-medium uppercase tracking-widest text-gray-400 dark:text-gray-600">
```

--------------------------------

### Define Setup Wizard Steps Data (TypeScript)

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-01.mdx

This TypeScript array defines the data structure for a multi-step setup wizard. Each object represents a step with properties like 'id', 'type' (status), 'title', 'description', and 'href' for navigation. This data drives the dynamic rendering of the wizard's progress.

```typescript
const steps = [
  {
    id: 1,
    type: 'done',
    title: 'Sign in with your account',
    description:
      'To get started, log in with your organization account from your company.',
    href: '#',
  },
  {
    id: 2,
    type: 'in progress',
    title: 'Import data',
    description:
      'Connect your database to the new workspace by using one of 20+ database connectors.',
    href: '#',
  },
  {
    id: 3,
    type: 'open',
    title: 'Create your first report',
    description:
      'Generate your first report by using our pre-built templates or easy-to-use report builder.',
    href: '#',
  }
];
```

--------------------------------

### React Example Page with Tremor UI Components

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/page-shells/page-shell-01.mdx

This comprehensive React component (`Example`) demonstrates a typical dashboard-like page structure. It utilizes Tremor UI components like `Card`, `Select`, and `Tabs` for layout and interaction. A helper component, `ContentPlaceholder`, is included to visually represent content areas. The example showcases responsive design using Tailwind CSS classes and basic state management for select and tab selections.

```tsx
// 'use client';

import { Card } from '@/components/Card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/Select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/Tabs';

function ContentPlaceholder() {
  return (
    <div className="relative h-full overflow-hidden rounded bg-gray-50 dark:bg-gray-800">
      <svg
        className="absolute inset-0 h-full w-full stroke-gray-200 dark:stroke-gray-700"
        fill="none"
      >
        <defs>
          <pattern
            id="pattern-1"
            x="0"
            y="0"
            width="10"
            height="10"
            patternUnits="userSpaceOnUse"
          >
            <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
          </pattern>
        </defs>
        <rect
          stroke="none"
          fill="url(#pattern-1)"
          width="100%"
          height="100%"
        ></rect>
      </svg>
    </div>
  );
}

export default function Example() {
  return (
    <>
      <div className="p-4 sm:p-6 lg:p-8">
        <header>
          <div className="sm:flex sm:items-center sm:justify-between">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
              Report
            </h3>
            <div className="mt-4 sm:mt-0 sm:flex sm:items-center sm:space-x-2">
              <Select defaultValue="1">
                <SelectTrigger className="w-full sm:w-36">
                  <SelectValue placeholder="Select" />
                </SelectTrigger>
                <SelectContent align="end">
                  <SelectItem value="1">Today</SelectItem>
                  <SelectItem value="2">Last 7 days</SelectItem>
                  <SelectItem value="3">Last 4 weeks</SelectItem>
                  <SelectItem value="4">Last 12 months</SelectItem>
                </SelectContent>
              </Select>
              <Select defaultValue="1">
                <SelectTrigger className="mt-2 w-full sm:mt-0 sm:w-36">
                  <SelectValue placeholder="Select" />
                </SelectTrigger>
                <SelectContent align="end">
                  <SelectItem value="1">US-West</SelectItem>
                  <SelectItem value="2">US-East</SelectItem>
                  <SelectItem value="3">EU-Central-1</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </header>
        <main>
          <Tabs defaultValue="1" className="mt-6">
            <TabsList>
              <TabsTrigger value="1">Overview</TabsTrigger>
              <TabsTrigger value="2">Detail</TabsTrigger>
            </TabsList>
            <TabsContent value="1" className="mt-4">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <Card className="h-36 p-2">
                  <ContentPlaceholder />
                </Card>
                <Card className="h-36 p-2">
                  <ContentPlaceholder />
                </Card>
                <Card className="h-36 p-2">
                  <ContentPlaceholder />
                </Card>
                <Card className="h-36 p-2">
                  <ContentPlaceholder />
                </Card>
              </div>
            </TabsContent>
            <TabsContent value="2" className="mt-4">
              <Card className="h-72 p-2">
                <ContentPlaceholder />
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </>
  );
}
```

--------------------------------

### Define Workspace Setup Progress Steps Data

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-07.mdx

An array of objects, `steps`, defining the sequential stages of a workspace setup process. Each object includes properties such as `id`, `type` (e.g., 'done', 'in progress', 'open'), `title`, `description`, and `activityTime`, which are used to render a progress timeline.

```TypeScript
const steps = [
  {
    id: 1,
    type: 'done',
    title: 'Created Workspace',
    description:
      'You successfully created your first workspace in privacy mode',
    activityTime: '3d ago',
  },
  {
    id: 2,
    type: 'done',
    title: 'Connected database',
    description: 'Database connected to MySQL test database',
    activityTime: '2d ago',
  },
  {
    id: 3,
    type: 'done',
    title: 'Add payment method',
    description: 'Payment method for monthly billing added',
    activityTime: '31min ago',
  },
  {
    id: 4,
    type: 'in progress',
    title: 'Audit trails',
    description: 'Identifying security issues or unauthorized policy settings',
    activityTime: 'Running now...',
  },
  {
    id: 5,
    type: 'open',
    title: 'Invite team members',
    description: 'Add team members to workspace',
    activityTime: 'Upcoming',
  },
];
```

--------------------------------

### React Component for Dashboard Onboarding Flow

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/banners/banner-05.mdx

This React component (`Example`) implements a multi-step onboarding guide for creating a dashboard. It displays a `Card` containing steps for connecting data, adding metrics, and creating reports, with dynamic content sourced from an internal data array. The component includes state management for visibility and a demo-specific effect to re-open the card after closing.

```tsx
import React from 'react';
import { RiCloseLine } from '@remixicon/react';

import { Button } from '@/components/Button';
import { Card } from '@/components/Card';

const data = [
  //array-start
  {
    step: 1,
    title: 'Connect data',
    description: 'Bring your existing data source or create a new one.',
    buttonText: 'Add data',
    disabled: false,
    tooltipText: '',
  },
  {
    step: 2,
    title: 'Add metrics',
    description:
      'Create metrics using custom SQL or with our aggregation mask.',
    buttonText: 'Add metric',
    disabled: true,
    tooltipText: 'Connect to a data source first',
  },
  {
    step: 3,
    title: 'Create report',
    description:
      'Transform metrics into visualizations and add layout elements.',
    buttonText: 'Create report',
    disabled: true,
    tooltipText: 'Create metrics first',
  },
  //array-end
];

export default function Example() {
  const [isOpen, setIsOpen] = React.useState(true);

  // just for demo purposes
  React.useEffect(() => {
    if (!isOpen) {
      const timeoutId: NodeJS.Timeout = setTimeout(() => {
        setIsOpen(true);
      }, 1000);

      return () => clearTimeout(timeoutId);
    }
  }, [isOpen]);

  return isOpen ? (
    <>
      <Card>
        <div className="absolute right-0 top-0 pr-3 pt-3">
          <Button
            className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-500 hover:dark:text-gray-300"
            variant="ghost"
            onClick={() => setIsOpen(false)}
            aria-label="Close"
          >
            <RiCloseLine className="size-5 shrink-0" aria-hidden={true} />
          </Button>
        </div>
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50">
          Create your first dashboard
        </h3>
        <p className="mt-2 text-sm/6 text-gray-500 dark:text-gray-500">
          Set up your first dashboard. Connect to a data source, create metrics
          and visualize them in the report builder.
        </p>
        <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {data.map((item) => (
            <div
              key={item.title}
              className="flex flex-col justify-between border-l-2 border-blue-100 py-1 pl-4 dark:border-blue-400/20"
            >
              <div>
                <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-500 dark:bg-blue-400/20 dark:text-blue-500">
                  Step {item.step}
                </span>
                <h4 className="mt-4 text-sm font-medium text-gray-900 dark:text-gray-50">
                  {item.title}
                </h4>
                <p className="mt-2 text-sm/6 text-gray-500 dark:text-gray-500">
                  {item.description}
                </p>
              </div>
              <Button disabled={item.disabled} className="mt-8">
                {item.buttonText}
              </Button>
            </div>
          ))}
        </div>
      </Card>
    </>
  ) : null;
}
```

--------------------------------

### Define Workspace Setup Progress Steps Data

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/onboarding-feed/onboarding-feed-08.mdx

This array defines the structured data for each step in the workspace setup process. Each object contains an ID, type (e.g., 'done', 'in progress', 'open'), a descriptive title, a detailed description, and a timestamp for activity. This data drives the progress timeline displayed in the UI.

```typescript
const steps = [
  {
    "id": 1,
    "type": "done",
    "title": "Created Workspace",
    "description": "You successfully created your first workspace in privacy mode",
    "activityTime": "3d ago"
  },
  {
    "id": 2,
    "type": "done",
    "title": "Connected database",
    "description": "Database connected to MySQL test database",
    "activityTime": "2d ago"
  },
  {
    "id": 3,
    "type": "done",
    "title": "Add payment method",
    "description": "Payment method for monthly billing added",
    "activityTime": "31min ago"
  },
  {
    "id": 4,
    "type": "in progress",
    "title": "Audit trails",
    "description": "Identifying security issues or unauthorized policy settings",
    "activityTime": "Running now..."
  },
  {
    "id": 5,
    "type": "open",
    "title": "Invite team members",
    "description": "Add team members to workspace",
    "activityTime": "Upcoming"
  }
];
```

--------------------------------

### Demonstrate Bar Chart with Custom Tooltip and Toggle

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/chart-tooltips/chart-tooltip-17.mdx

The main example component that orchestrates the BarChart demonstration. It includes a toggle button to show/hide the chart, a preview of the custom tooltip, and two BarChart instances (one for small screens, one for larger screens) using the defined data and custom tooltip. This setup illustrates responsive chart rendering and interactive display.

```tsx
export default function Example() {
  const [showDemo, setShowDemo] = React.useState(false);
  return (
    <>
      <div className="flex w-full justify-center">
        <CustomTooltip
          label="Jan 23"
          active={true}
          payload={[
            {
              category: 'Revenue',
              value: 14230,
              index: 'Jan 23',
              color: 'blue',
              payload: {
                date: 'Jan 23',
                Running: 14230,
              },
            },
          ]}
        />
      </div>
      <Divider className="mt-12">
        <Button
          variant="light"
          onClick={() => setShowDemo(!showDemo)}
          className="group rounded-full bg-gray-100 text-gray-500 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-500 hover:dark:bg-gray-900"
          tabIndex={0}
        >
          <RiArrowDownSLine
            aria-hidden={true}
            className={`-ml-1 size-5 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50 ${showDemo ? 'rotate-180' : ''} `}
          />
          <span className="ml-1 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50">
            {showDemo ? 'Hide Demo' : 'Show Demo'}
          </span>
        </Button>
      </Divider>
      {showDemo ? (
        <>
          <BarChart
            className="mt-12 hidden h-72 sm:block"
            data={data}
            index="date"
            categories={['Revenue']}
            valueFormatter={valueFormatter}
            yAxisWidth={70}
            showLegend={false}
            customTooltip={CustomTooltip}
          />
          <BarChart
            className="mt-12 h-72 sm:hidden"
            data={data}
            index="date"
            categories={['Revenue']}
            valueFormatter={valueFormatter}
            showYAxis={false}
            showLegend={false}
            startEndOnly={true}
            customTooltip={CustomTooltip}
          />
        </>
      ) : null}
    </>
  );
}
```

--------------------------------

### Main Dashboard Example Component Structure

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/chart-compositions/chart-composition-10.mdx

This is the main 'Example' React component, serving as the entry point for the dashboard UI. It utilizes the 'useState' hook to manage local component state, such as 'showContent', and renders a flexible layout that includes dynamically mapped summary statistics, demonstrating how various UI elements are composed.

```tsx
export default function Example() {
  const [showContent, setShowContent] = React.useState(true);

  return (
    <>
      <div className="flex flex-col gap-x-6 gap-y-5 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
        <div className="mt-4 flex items-center gap-4 gap-y-2 sm:mt-0 sm:gap-x-8">
          {summary.map((item, index) => (
            <React.Fragment key={item.name}>
              <div>
                <p className="whitespace-nowrap text-sm text-gray-500 dark:text-gray-500">
                  {item.name}
                </p>

                <p className="mt-1 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-50">
                  {item.value}
                </p>
              </div>
              <span className="flex">
                {index < summary.length - 1 && (
                  <span
                    className="h-10 w-px bg-slate-500/20"
```

--------------------------------

### Main Bar Chart Example Component

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/chart-tooltips/chart-tooltip-02.mdx

The `Example` component demonstrates the usage of the BarChart with the custom tooltip. It manages a `showDemo` state to toggle the visibility of the charts, includes a button for this toggle, and renders two `BarChart` instances configured for different screen sizes.

```tsx
export default function Example() {
  const [showDemo, setShowDemo] = React.useState(false);
  return (
    <>
      {/* Demo */}
      <div className="flex w-full justify-center">
        <CustomTooltip
          label="Mar 23"
          active={true}
          payload={[
            {
              category: 'Running',
              value: 3322,
              index: 'Mar 23',
              color: 'blue',
              payload: {
                date: 'Mar 23',
                Running: 3322
              }
            }
          ]}
        />
      </div>
      <Divider className="mt-12">
        <Button
          variant="light"
          onClick={() => setShowDemo(!showDemo)}
          className="group rounded-full bg-gray-100 text-gray-500 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-500 hover:dark:bg-gray-900"
        >
          <RiArrowDownSLine
            aria-hidden={true}
            className={`-ml-1 size-5 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50 ${showDemo ? 'rotate-180' : ''} `}
          />
          <span className="ml-1 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50">
            {showDemo ? 'Hide Demo' : 'Show Demo'}
          </span>
        </Button>
      </Divider>
      {showDemo ? (
        <>
          <BarChart
            className="mt-12 hidden h-72 sm:block"
            data={data}
            index="date"
            categories={['Running']}
            valueFormatter={valueFormatter}
            yAxisWidth={70}
            showLegend={false}
            customTooltip={CustomTooltip}
          />
          <BarChart
            className="mt-12 h-72 sm:hidden"
            data={data}
            index="date"
            categories={['Running']}
            valueFormatter={valueFormatter}
            showYAxis={false}
            showLegend={false}
            startEndOnly={true}
            customTooltip={CustomTooltip}
          />
        </>
      ) : null}
    </>
  );
}
```

--------------------------------

### React Example Component Demonstrating Tremor UI Elements

Source: https://github.com/tremorlabs/tremor-blocks/blob/main/src/content/markdown/chart-tooltips/chart-tooltip-20.mdx

This React functional component, `Example`, showcases the integration and usage of several Tremor UI components including `CustomTooltip`, `Divider`, `Button`, and `BarChart`. It manages a `showDemo` state to toggle the visibility of two responsive `BarChart` instances and demonstrates passing complex data structures as props to these components.

```TypeScript
export default function Example() {
  const [showDemo, setShowDemo] = React.useState(false);
  return (
    <>
      <div className="flex w-full justify-center">
        <CustomTooltip
          label="Jan 23"
          active={true}
          payload={[
            {
              category: 'sales',
              value: 3130,
              index: 'May 23',
              color: 'blue',
              payload: {
                date: 'May 23',
                sales: 3130,
                locations: [
                  { location: 'Europe', sales: 900, share: '28.8%' },
                  { location: 'Asia', sales: 1000, share: '31.9%' },
                  { location: 'North America', sales: 1230, share: '39.3%' }
                ]
              }
            }
          ]}
        />
      </div>
      <Divider className="mt-12">
        <Button
          variant="light"
          onClick={() => setShowDemo(!showDemo)}
          className="group rounded-full bg-gray-100 text-gray-500 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-500 hover:dark:bg-gray-900"
          tabIndex={0}
        >
          <RiArrowDownSLine
            aria-hidden={true}
            className={`-ml-1 size-5 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50 ${showDemo ? 'rotate-180' : ''} `}
          />
          <span className="ml-1 transition-all group-hover:text-gray-900 group-hover:dark:text-gray-50">
            {showDemo ? 'Hide Demo' : 'Show Demo'}
          </span>
        </Button>
      </Divider>
      {showDemo ? (
        <>
          <BarChart
            className="mt-12 hidden h-72 sm:block"
            data={data}
            index="date"
            categories={['sales']}
            type="stacked"
            colors={['blue']}
            valueFormatter={currencyFormatter}
            yAxisWidth={50}
            showLegend={false}
            customTooltip={CustomTooltip}
          />
          <BarChart
            className="mt-12 h-80 sm:hidden"
            data={data}
            index="date"
            categories={['sales']}
            type="stacked"
            colors={['blue']}
            valueFormatter={currencyFormatter}
            showYAxis={false}
            showLegend={false}
            startEndOnly={true}
            customTooltip={CustomTooltip}
          />
        </>
      ) : null}
    </>
  );
}
```