ProgressBar

import { ProgressBar } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

type ImportProgressProps = { percentage: number };

export const ImportProgress = ({ percentage }: ImportProgressProps) => (
  <>
    <Text>Importing records: {percentage}%</Text>
    <ProgressBar
      value={percentage}
      ariaLabel="Importing records"
      withBorderRadius
    />
  </>
);

import { useState } from 'react';
import { ProgressBar } from 'twenty-ui/primitives/feedback';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const PreviewCountdown = () => {
  const [isPaused, setIsPaused] = useState(false);
  const [isComplete, setIsComplete] = useState(false);

  return (
    <>
      <Text role="status">
        {isComplete ? 'Preview ended' : 'Preview available'}
      </Text>
      {!isComplete && (
        <>
          <div aria-hidden="true">
            <ProgressBar
              value={100}
              ariaLabel="Preview countdown"
              countdownDurationInMs={10000}
              isCountdownPaused={isPaused}
              onCountdownComplete={() => setIsComplete(true)}
            />
          </div>
          <Button onClick={() => setIsPaused((paused) => !paused)}>
            {isPaused ? 'Resume countdown' : 'Pause countdown'}
          </Button>
        </>
      )}
    </>
  );
};