packages/pass/components/Onboarding/OnboardingState.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms/index';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import { useOnboarding } from './OnboardingProvider';
  10
  11 export const OnboardingState: FC<{ className?: string }> = ({ className }) => {
  12     const { steps, launch, acknowledge, completed } = useOnboarding();
  13
  14     return (
  15         <div className="relative px-3">
  16             <Button
  17                 icon
  18                 pill
  19                 shape="ghost"
  20                 color="weak"
  21                 size="small"
  22                 onClick={acknowledge}
  23                 className="absolute top-0 right-0 mx-4 mt-1"
  24             >
  25                 <Icon name="cross-circle-filled" alt={c('Action').t`Close`} />
  26             </Button>
  27             <Button
  28                 onClick={launch}
  29                 shape="ghost"
  30                 className={clsx('w-full shrink-0 border border-weak rounded-lg bg-weak ', className)}
  31             >
  32                 <div className="flex justify-space-between items-center">
  33                     <div className="text-lg text-semibold">{c('Label').t`Get Started`}</div>
  34                 </div>
  35                 {steps.map(({ key, shortTitle }) => (
  36                     <div key={key} className="w-full text-left flex gap-2 items-center mt-2">
  37                         {completed.includes(key) ? (
  38                             <Icon name="checkmark-circle-filled" color="var(--signal-success)" />
  39                         ) : (
  40                             <Icon name="circle" />
  41                         )}
  42                         {shortTitle}
  43                     </div>
  44                 ))}
  45             </Button>
  46         </div>
  47     );
  48 };