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

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { Theme } from '@proton/components/containers/themes/ThemeCards';
   5 import ThemeSvg from '@proton/components/containers/themes/ThemeSvg';
   6 import type { ThemeTypes } from '@proton/shared/lib/themes/themes';
   7 import clsx from '@proton/utils/clsx';
   8
   9 type Props = {
  10     themeIdentifier: ThemeTypes;
  11     onChange: (themeType: ThemeTypes) => void;
  12     list: Theme[];
  13 };
  14
  15 export const ThemePicker = ({ list, themeIdentifier, onChange }: Props) => {
  16     return (
  17         <ul
  18             className={'unstyled m-0 grid-auto-fill gap-4 max-w-3/4'}
  19             style={{ '--min-grid-template-column-size': `6rem` }}
  20         >
  21             {list.map(({ identifier, label, thumbColors }) => {
  22                 const id = `id_${identifier}`;
  23                 const selected = themeIdentifier === identifier;
  24                 const size = 'small';
  25
  26                 return (
  27                     <li key={label}>
  28                         <Button
  29                             name="themeCard"
  30                             color="norm"
  31                             id={id}
  32                             className={clsx(
  33                                 'p-2 flex flex-nowrap flex-column gap-1 items-start w-full rounded-lg border-2',
  34                                 'relative interactive interactive--no-background',
  35                                 selected ? 'border-primary pointer-events-none text-bold' : 'border-transparent'
  36                             )}
  37                             aria-pressed={selected}
  38                             onClick={() => onChange(identifier)}
  39                             type={'button'}
  40                             aria-label={c('Action').t`Use ${label} theme`}
  41                             title={c('Action').t`Use ${label} theme`}
  42                         >
  43                             <ThemeSvg
  44                                 className={clsx('block rounded rtl:mirror', selected ? 'shadow-raised' : 'shadow-norm')}
  45                                 size={size}
  46                                 colors={thumbColors}
  47                             />
  48                             <span className={selected ? 'color-norm' : 'color-weak'}>{label}</span>
  49                         </Button>
  50                     </li>
  51                 );
  52             })}
  53         </ul>
  54     );
  55 };