applications/drive/src/app/components/modals/DriveOnboardingV2Modal/Header.tsx

   1 import { memo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon, Tooltip } from '@proton/components';
   7 import clsx from '@proton/utils/clsx';
   8
   9 type Props = {
  10     currentStep: number;
  11     maxSteps: number;
  12     onBack?: () => void;
  13 };
  14
  15 export const Header = memo(({ onBack, currentStep, maxSteps }: Props) => {
  16     return (
  17         <div className="relative p-4">
  18             {onBack ? (
  19                 <Tooltip title={c('Action').t`Go back`}>
  20                     <Button className="shrink-0 absolute top-0 left-0" icon shape="ghost" onClick={onBack}>
  21                         <Icon name="arrow-left" alt={c('Action').t`Go back`} />
  22                     </Button>
  23                 </Tooltip>
  24             ) : null}
  25
  26             <div className="flex align-center justify-center gap-2">
  27                 {[...Array(maxSteps).keys()].map((i) => {
  28                     return (
  29                         <div
  30                             key={`step-${i}`}
  31                             className={clsx([i == currentStep ? 'bg-primary' : 'bg-strong', 'pr-8 h-2 rounded-full'])}
  32                         />
  33                     );
  34                 })}
  35             </div>
  36         </div>
  37     );
  38 });
  39
  40 Header.displayName = 'OnboardingHeader';