Onboarding & Feed

// 'use client';
import {  RiCheckboxBlankCircleLine,  RiCheckboxCircleFill,  RiDatabase2Line,} from '@remixicon/react';
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-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">          Hello, Maxime        </h3>        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">          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-tremor-brand dark:text-dark-tremor-brand"                    aria-hidden={true}                  />                  <div className="ml-3 w-0 flex-1 pt-0.5">                    <p className="font-medium leading-5 text-tremor-content-strong dark:text-dark-tremor-content-strong">                      <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-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                      {step.description}                    </p>                  </div>                </div>              </li>            ) : step.type === 'in progress' ? (              <li className="rounded-tremor-default bg-tremor-background-muted p-4 dark:bg-dark-tremor-background-muted">                <div className="flex items-start">                  <RiCheckboxBlankCircleLine                    className="size-6 shrink-0 text-tremor-brand dark:text-dark-tremor-brand"                    aria-hidden={true}                  />                  <div className="ml-3 w-0 flex-1 pt-0.5">                    <p className="font-medium leading-5 text-tremor-content-strong dark:text-dark-tremor-content-strong">                      {step.title}                    </p>                    <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                      {step.description}                    </p>                    <button                      type="button"                      className="mt-4 inline-flex items-center gap-1.5 whitespace-nowrap rounded-tremor-small bg-tremor-brand px-3 py-2 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis"                    >                      <RiDatabase2Line                        className="-ml-0.5 size-5 shrink-0"                        aria-hidden={true}                      />                      Connect database                    </button>                  </div>                </div>              </li>            ) : (              <li className="relative p-4">                <div className="flex items-start">                  <RiCheckboxBlankCircleLine                    className="size-6 shrink-0 text-tremor-content-subtle dark:text-dark-tremor-content-subtle"                    aria-hidden={true}                  />                  <div className="ml-3 w-0 flex-1 pt-0.5">                    <p className="font-medium leading-5 text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                      <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-tremor-default leading-6 text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                      {step.description}                    </p>                  </div>                </div>              </li>            ),          )}        </ul>      </div>    </>  );}

// 'use client';
import { RiCheckboxCircleFill } from '@remixicon/react';
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',  },];
export default function Example() {  return (    <>      <div className="sm:mx-auto sm:max-w-lg">        <h3 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">          Getting started        </h3>        <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">          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-tremor-default border border-tremor-border bg-tremor-background p-4 dark:border-dark-tremor-border dark:bg-dark-tremor-background"            >              <div className="flex items-start space-x-3">                {step.status === 'complete' ? (                  <RiCheckboxCircleFill                    className="size-6 shrink-0 text-tremor-brand dark:text-dark-tremor-brand"                    aria-hidden={true}                  />                ) : (                  <span                    className="flex size-6 items-center justify-center font-medium text-tremor-content dark:text-dark-tremor-content"                    aria-hidden={true}                  >                    {step.id}                  </span>                )}                <div>                  <h3 className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                    {step.title}                  </h3>                  <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                    {step.description}                  </p>                </div>              </div>            </li>          ))}        </ul>        <div className="mt-8 flex items-center justify-end space-x-4">          <button            type="button"            className="whitespace-nowrap rounded-tremor-small px-4 py-2.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"          >            Back          </button>          <button            type="button"            className="whitespace-nowrap rounded-tremor-small bg-tremor-brand px-4 py-2.5 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis"          >            Continue          </button>        </div>      </div>    </>  );}

// 'use client';
import { RiCheckboxCircleFill } from '@remixicon/react';import { ProgressBar } from '@tremor/react';
const steps = [  {    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: '#',  },];
export default function Example() {  return (    <>      <div className="sm:mx-auto sm:max-w-lg">        <h3 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">          Getting started        </h3>        <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">          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-tremor-default text-tremor-content dark:text-dark-tremor-content">            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-tremor-default border border-tremor-border bg-tremor-background p-4 dark:border-dark-tremor-border dark:bg-dark-tremor-background"            >              <div className="flex items-start space-x-3">                {step.status === 'complete' ? (                  <RiCheckboxCircleFill                    className="size-6 shrink-0 text-tremor-brand dark:text-dark-tremor-brand"                    aria-hidden={true}                  />                ) : (                  <span                    className="flex size-6 items-center justify-center font-medium text-tremor-content dark:text-dark-tremor-content"                    aria-hidden={true}                  >                    {step.id}                  </span>                )}                <div>                  <h3 className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                    <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-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                    {step.description}                  </p>                </div>              </div>            </li>          ))}        </ul>        <div className="mt-6 rounded-tremor-default bg-tremor-background-muted p-4 dark:bg-dark-tremor-background-muted">          <h4 className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">            Need help?          </h4>          <p className="mt-1 text-tremor-default text-tremor-content dark:text-dark-tremor-content">            Connect with a member of our team at{' '}            <a              href="mailto:support@company.com"              className="font-medium text-tremor-brand dark:text-dark-tremor-brand"            >              support@company.com            </a>            .          </p>        </div>      </div>    </>  );}

// 'use client';
import {  RiCalculatorLine,  RiCheckboxCircleFill,  RiDatabase2Line,  RiFileChartLine,  RiSoundModuleLine,} from '@remixicon/react';import { Accordion, AccordionBody, AccordionHeader } from '@tremor/react';
const steps = [  {    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',  },];
export default function Example() {  return (    <>      <div className="sm:mx-auto sm:max-w-lg">        <h3 className="text-tremor-title font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">          Getting started        </h3>        <p className="mt-1 text-tremor-default text-tremor-content dark:text-dark-tremor-content">          Follow the steps to set up your workspace        </p>        <div className="mt-6 space-y-2">          {steps.map((step) => (            <Accordion              key={step.title}              className="rounded-b-tremor-default shadow-tremor-input dark:shadow-dark-tremor-input"              defaultOpen={step.status === 'current'}            >              {step.status === 'complete' ? (                <>                  <AccordionHeader>                    <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-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                        {step.title}                      </p>                    </div>                  </AccordionHeader>                  <AccordionBody className="p-2">                    <div className="flex items-center justify-center rounded-tremor-small bg-tremor-background-muted px-4 py-5 ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-muted dark:ring-dark-tremor-ring">                      <div className="max-w-xs text-center">                        {/* custom color used to optimize this edge case */}                        <step.icon                          className="mx-auto h-7 w-7 shrink-0 text-gray-300 dark:text-gray-700"                          aria-hidden={true}                        />                        <p className="mt-4 text-tremor-default font-semibold text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                          {step.subtitle}                        </p>                        <p className="mt-1 text-tremor-default text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                          {step.description}                        </p>                        <button                          type="button"                          className="mt-6 whitespace-nowrap rounded-tremor-small border border-tremor-border bg-tremor-background px-3 py-2 text-tremor-default font-medium text-tremor-content shadow-tremor-input hover:text-tremor-content-strong dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:shadow-dark-tremor-input hover:dark:text-dark-tremor-content-strong"                        >                          {step.buttonText}                        </button>                      </div>                    </div>                  </AccordionBody>                </>              ) : step.status === 'current' ? (                <>                  <AccordionHeader>                    <div className="flex items-center space-x-2">                      <span                        className="size-5 shrink-0 rounded-tremor-full border border-tremor-border dark:border-dark-tremor-border"                        aria-hidden={true}                      />                      <p className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                        {step.title}                      </p>                    </div>                  </AccordionHeader>                  <AccordionBody className="p-2">                    <div className="flex items-center justify-center rounded-tremor-small bg-tremor-background-muted px-4 py-5 ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-muted dark:ring-dark-tremor-ring">                      <div className="max-w-xs text-center">                        <step.icon                          className="mx-auto h-7 w-7 shrink-0 text-tremor-content-subtle dark:text-dark-tremor-content-subtle"                          aria-hidden={true}                        />                        <p className="mt-4 text-tremor-default font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">                          {step.subtitle}                        </p>                        <p className="mt-1 text-tremor-default text-tremor-content dark:text-dark-tremor-content">                          {step.description}                        </p>                        <button                          type="button"                          className="mt-6 whitespace-nowrap rounded-tremor-small bg-tremor-brand px-3 py-2 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis"                        >                          {step.buttonText}                        </button>                      </div>                    </div>                  </AccordionBody>                </>              ) : (                <>                  <AccordionHeader>                    <div className="flex items-center space-x-2">                      <span                        className="size-5 shrink-0 rounded-tremor-full border border-tremor-border dark:border-dark-tremor-border"                        aria-hidden={true}                      />                      <p className="text-tremor-default font-medium text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                        {step.title}                      </p>                    </div>                  </AccordionHeader>                  <AccordionBody className="p-2">                    <div className="flex items-center justify-center rounded-tremor-small bg-tremor-background-muted px-4 py-5 ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-muted dark:ring-dark-tremor-ring">                      <div className="max-w-xs text-center">                        {/* custom color used to optimize this edge case */}                        <step.icon                          className="mx-auto h-7 w-7 shrink-0 text-gray-300 dark:text-gray-700"                          aria-hidden={true}                        />                        <p className="mt-4 text-tremor-default font-semibold text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                          {step.subtitle}                        </p>                        <p className="mt-1 text-tremor-default text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                          {step.description}                        </p>                        <button                          type="button"                          className="mt-6 whitespace-nowrap rounded-tremor-small bg-tremor-brand px-3 py-2 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-tremor-brand dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis disabled:hover:dark:bg-dark-tremor-brand"                          disabled                        >                          {step.buttonText}                        </button>                      </div>                    </div>                  </AccordionBody>                </>              )}            </Accordion>          ))}        </div>      </div>    </>  );}

// 'use client';
function classNames(...classes) {  return classes.filter(Boolean).join(' ');}
const steps = [  {    id: 1,    type: 'created',    description: 'Created Workspace',    user: {      name: 'Adam W.',      initial: 'A',      bgColor: 'bg-violet-500',    },    activityTime: '3d ago',  },  {    id: 2,    type: 'created',    description: 'Renamed workspace',    user: {      name: 'Peter H.',      initial: 'P',      bgColor: 'bg-orange-500',    },    activityTime: '2d ago',  },  {    id: 3,    type: 'created',    description: 'Added MySQL database to workspace',    user: {      name: 'Adam W.',      initial: 'A',      bgColor: 'bg-emerald-500',    },    activityTime: '2h ago',  },  {    id: 4,    type: 'created',    description: 'Changed access permission to private',    user: {      name: 'George S.',      initial: 'G',      bgColor: 'bg-fuchsia-500',    },    activityTime: '5min ago',  },  {    id: 5,    type: 'in progress',    description: 'Has to run audit trails',    user: {      name: 'Admin Workspace',      initial: 'A',      bgColor: 'bg-blue-500',    },    activityTime: 'today 2:30pm',  },];
export default function Example() {  return (    <>      <div className="sm:max-w-lg md:mx-auto">        <h3 className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">          Workspace history        </h3>        <p className="mt-1 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">          Lorem ipsum dolor sit amet, consetetur sadipscing elitr        </p>        <ul role="list" className="mt-6 space-y-6 pb-2">          {steps.map((step, stepIdx) => (            <li key={step.id} className="relative flex gap-x-3">              <div                className={classNames(                  stepIdx === steps.length - 1 ? 'h-6' : '-bottom-6',                  'absolute left-0 top-0 flex w-6 justify-center',                )}              >                <span                  className="w-px bg-tremor-border dark:bg-tremor-content-emphasis"                  aria-hidden={true}                />              </div>              <div className="flex items-start space-x-2">                <div className="flex items-center space-x-2">                  {/* bg-gray-950 used as color to match the underlying dark mode background color */}                  <div className="relative flex size-6 flex-none items-center justify-center bg-tremor-background dark:bg-gray-950">                    {step.type === 'created' ? (                      <div className="size-3 rounded-full border border-gray-300 bg-tremor-background-subtle ring-4 ring-tremor-background dark:border-tremor-content-emphasis dark:bg-dark-tremor-background-subtle dark:ring-gray-950" />                    ) : (                      <div className="size-3 rounded-full border border-gray-300 bg-tremor-background ring-4 ring-tremor-background dark:border-tremor-content-emphasis dark:bg-dark-tremor-background dark:ring-gray-950" />                    )}                  </div>                  <span                    className={classNames(                      step.user.bgColor,                      'inline-flex size-6 flex-none items-center justify-center rounded-full text-tremor-label text-tremor-brand-inverted',                    )}                    aria-hidden={true}                  >                    {step.user.initial}                  </span>                </div>                <p className="mt-0.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                  {step.user.name}                  <span className="font-normal text-tremor-content dark:text-dark-tremor-content">                    {' '}                    {step.description}                  </span>                  <span className="font-normal text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                    {' '}                    &#8729; {step.activityTime}                  </span>                </p>              </div>            </li>          ))}        </ul>      </div>    </>  );}

// 'use client';
import { RiCheckLine } from '@remixicon/react';
function classNames(...classes) {  return classes.filter(Boolean).join(' ');}
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',  },];
const details = [  { name: 'Name', value: 'test_workspace' },  { name: 'Storage used', value: '0.25/10GB' },  { name: 'Payment cycle', value: '1st day of month' },];
export default function Example() {  return (    <>      <div className="sm:mx-auto sm:max-w-lg">        <h3 className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">          Workspace setup        </h3>        <ul role="list" className="mt-6 space-y-6">          {steps.map((step, stepIdx) => (            <li key={step.id} className="relative flex gap-x-3">              <div                className={classNames(                  stepIdx === steps.length - 1 ? 'h-6' : '-bottom-6',                  'absolute left-0 top-0 flex w-6 justify-center',                )}              >                <span                  className="w-px bg-tremor-border dark:bg-tremor-content-emphasis"                  aria-hidden={true}                />              </div>              <div className="flex items-start space-x-2.5">                {/* bg-gray-950 used as color to match the underlying dark mode background color */}                <div className="relative flex size-6 flex-none items-center justify-center bg-tremor-background dark:bg-gray-950">                  {step.type === 'done' ? (                    <RiCheckLine                      className="size-5 text-tremor-brand dark:text-dark-tremor-brand"                      aria-hidden={true}                    />                  ) : step.type === 'in progress' ? (                    <div                      className="size-2.5 rounded-tremor-full bg-tremor-brand ring-4 ring-tremor-background dark:bg-dark-tremor-brand dark:ring-gray-950"                      aria-hidden={true}                    />                  ) : (                    <div                      className="size-3 rounded-tremor-full border border-tremor-border bg-tremor-background ring-4 ring-tremor-background dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:ring-gray-950"                      aria-hidden={true}                    />                  )}                </div>                <div>                  <p className="mt-0.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                    {step.title}{' '}                    <span className="font-normal text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                      &#8729; {step.activityTime}                    </span>                  </p>                  <p className="mt-0.5 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                    {step.description}                  </p>                </div>              </div>            </li>          ))}        </ul>      </div>    </>  );}

// 'use client';
import {  RiCheckLine,  RiLock2Fill,  RiNotification2Line,  RiSoundModuleLine,} from '@remixicon/react';import {  Card,  List,  ListItem,  Tab,  TabGroup,  TabList,  TabPanel,  TabPanels,} from '@tremor/react';
function classNames(...classes) {  return classes.filter(Boolean).join(' ');}
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',  },];
const details = [  { name: 'Name', value: 'test_workspace' },  { name: 'Storage used', value: '0.25/10GB' },  { name: 'Payment cycle', value: '1st day of month' },];
export default function Example() {  return (    <>      <div className="sm:mx-auto sm:max-w-xl">        <Card>          <h3 className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">            Workspace setup          </h3>          <TabGroup className="mt-4">            <TabList className="w-full" variant="solid">              <Tab className="w-full justify-center font-medium">Updates</Tab>              <Tab className="w-full justify-center font-medium">Details</Tab>            </TabList>            <TabPanels>              <TabPanel>                <ul role="list" className="mt-6 space-y-6">                  {steps.map((step, stepIdx) => (                    <li key={step.id} className="relative flex gap-x-3">                      <div                        className={classNames(                          stepIdx === steps.length - 1 ? 'h-6' : '-bottom-6',                          'absolute left-0 top-0 flex w-6 justify-center',                        )}                      >                        <span                          className="w-px bg-tremor-border dark:bg-tremor-content-emphasis"                          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-tremor-background dark:bg-dark-tremor-background">                          {step.type === 'done' ? (                            <RiCheckLine                              className="size-5 text-tremor-brand dark:text-dark-tremor-brand"                              aria-hidden={true}                            />                          ) : step.type === 'in progress' ? (                            <div                              className="size-2.5 rounded-tremor-full bg-tremor-brand ring-4 ring-tremor-background dark:bg-dark-tremor-brand dark:ring-dark-tremor-background"                              aria-hidden={true}                            />                          ) : (                            <div                              className="size-3 rounded-tremor-full border border-tremor-border bg-tremor-background ring-4 ring-tremor-background dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:ring-dark-tremor-background"                              aria-hidden={true}                            />                          )}                        </div>                        <div>                          <p className="mt-0.5 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                            {step.title}{' '}                            <span className="font-normal text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                              &#8729; {step.activityTime}                            </span>                          </p>                          <p className="mt-0.5 text-tremor-default leading-6 text-tremor-content dark:text-dark-tremor-content">                            {step.description}                          </p>                        </div>                      </div>                    </li>                  ))}                </ul>                <button                  type="button"                  className="mt-6 inline-flex h-10 w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-tremor-small bg-tremor-brand px-3 text-tremor-default font-medium text-tremor-brand-inverted shadow-tremor-input hover:bg-tremor-brand-emphasis dark:bg-dark-tremor-brand dark:text-dark-tremor-brand-inverted dark:shadow-dark-tremor-input dark:hover:bg-dark-tremor-brand-emphasis"                >                  <RiNotification2Line                    className="-ml-0.5 size-5 shrink-0"                    aria-hidden={true}                  />                  Notify me when completed                </button>              </TabPanel>              <TabPanel>                <h4 className="mt-6 text-tremor-label font-medium uppercase tracking-widest text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                  General                </h4>                <List className="mt-3 rounded-tremor-small bg-tremor-background-muted dark:divide-tremor-content-emphasis dark:bg-dark-tremor-background-subtle">                  {details.map((item) => (                    <ListItem key={item.name} className="h-14 px-4">                      <span className="text-tremor-content dark:text-dark-tremor-content">                        {item.name}                      </span>                      <span className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">                        {item.value}                      </span>                    </ListItem>                  ))}                </List>                <h4 className="mt-6 text-tremor-label font-medium uppercase tracking-widest text-tremor-content-subtle dark:text-dark-tremor-content-subtle">                  Privacy settings                </h4>                <List className="mt-3 rounded-tremor-small bg-tremor-background-muted dark:divide-tremor-content-emphasis dark:bg-dark-tremor-background-subtle">                  <ListItem className="h-14 px-4">                    <span className="text-tremor-content dark:text-dark-tremor-content">                      Users                    </span>                    <div className="flex -space-x-0.5 overflow-hidden">                      <span                        className="relative inline-flex size-5 items-center justify-center rounded-tremor-full bg-violet-500 text-tremor-label text-tremor-brand-inverted ring-2 ring-tremor-background-muted dark:ring-dark-tremor-background-subtle"                        aria-hidden={true}                      >                        A                      </span>                      <span                        className="relative inline-flex size-5 items-center justify-center rounded-tremor-full bg-fuchsia-500 text-tremor-label text-tremor-brand-inverted ring-2 ring-tremor-background-muted dark:ring-dark-tremor-background-subtle"                        aria-hidden={true}                      >                        D                      </span>                      <span                        className="relative inline-flex size-5 items-center justify-center rounded-tremor-full bg-cyan-500 text-tremor-label text-tremor-brand-inverted ring-2 ring-tremor-background-muted dark:ring-dark-tremor-background-subtle"                        aria-hidden={true}                      >                        B                      </span>                    </div>                  </ListItem>                  <ListItem className="h-14 px-4">                    <span className="text-tremor-content dark:text-dark-tremor-content">                      Access                    </span>                    <span className="inline-flex items-center gap-x-1.5 rounded-md bg-tremor-background px-2 py-1.5 text-tremor-label font-medium text-tremor-content-strong ring-1 ring-inset ring-tremor-ring dark:bg-dark-tremor-background-subtle dark:text-dark-tremor-content-strong dark:ring-tremor-content-emphasis">                      <RiLock2Fill                        className="size-4 text-tremor-content-subtle dark:text-dark-tremor-content-subtle"                        aria-hidden={true}                      />                      Private                    </span>                  </ListItem>                </List>                <a                  href="#"                  className="mt-4 inline-flex h-10 w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-tremor-small border border-tremor-border bg-tremor-background px-3 text-tremor-default font-medium text-tremor-content-emphasis shadow-tremor-input hover:text-tremor-content-strong dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-content-emphasis dark:shadow-dark-tremor-input hover:dark:text-dark-tremor-content-strong"                >                  <RiSoundModuleLine                    className="-ml-0.5 size-5 shrink-0"                    aria-hidden={true}                  />                  Go to workspace settings                </a>              </TabPanel>            </TabPanels>          </TabGroup>        </Card>      </div>    </>  );}