packages/components/containers/themes/ThemeSyncModeDropdown.tsx

   1 import { c } from 'ttag';
   2
   3 import { ButtonLike } from '@proton/atoms';
   4 import DropdownMenu from '@proton/components/components/dropdown/DropdownMenu';
   5 import DropdownMenuButton from '@proton/components/components/dropdown/DropdownMenuButton';
   6 import SimpleDropdown from '@proton/components/components/dropdown/SimpleDropdown';
   7 import { DropdownSizeUnit } from '@proton/components/components/dropdown/utils';
   8 import Icon from '@proton/components/components/icon/Icon';
   9 import type { ThemeTypes } from '@proton/shared/lib/themes/themes';
  10 import { PROTON_THEMES_MAP } from '@proton/shared/lib/themes/themes';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import ThemeCard from '../../containers/themes/ThemeCard';
  14 import type { Theme } from './ThemeCards';
  15
  16 interface Props {
  17     mode: 'light' | 'dark';
  18     minSize?: string;
  19     className?: string;
  20     themeIdentifier: ThemeTypes;
  21     list: Theme[];
  22     onChange: (themeType: ThemeTypes) => void;
  23     active: boolean;
  24 }
  25
  26 const ThemeSyncModeDropdown = ({ mode, className, themeIdentifier, list, onChange }: Props) => {
  27     const dropdownButtonContent = (
  28         <>
  29             <span className="w-custom" style={{ '--w-custom': '2.75rem' }}>
  30                 <ThemeCard
  31                     label={PROTON_THEMES_MAP[themeIdentifier].label}
  32                     id={`id_${PROTON_THEMES_MAP[themeIdentifier].identifier}`}
  33                     size="small"
  34                     colors={PROTON_THEMES_MAP[themeIdentifier].thumbColors}
  35                     as="div"
  36                     className="rounded-sm"
  37                 />
  38             </span>
  39             <span className="flex-1">{PROTON_THEMES_MAP[themeIdentifier].label}</span>
  40         </>
  41     );
  42
  43     return (
  44         <div className={clsx('', className)}>
  45             <div className={clsx('flex justify-space-between flex-nowrap gap-2 mb-2')}>
  46                 <div className="flex items-center flex-nowrap gap-2 text-sm">
  47                     <Icon name={mode === 'light' ? 'sun' : 'moon'} className={clsx('color-weak shrink-0')} />
  48                     <span className="color-weak">
  49                         {mode === 'light' ? c('Title').t`Day theme` : c('Title').t`Night theme`}
  50                     </span>
  51                 </div>
  52             </div>
  53             <SimpleDropdown
  54                 as={ButtonLike}
  55                 shape="outline"
  56                 color="weak"
  57                 type="button"
  58                 originalPlacement="bottom"
  59                 dropdownClassName="quickSettingsThemeDropdown"
  60                 content={dropdownButtonContent}
  61                 contentProps={{
  62                     size: { width: DropdownSizeUnit.Anchor, height: DropdownSizeUnit.Dynamic, maxHeight: '10rem' },
  63                 }}
  64                 className={clsx('w-full flex flex-nowrap justify-space-between p-2 gap-3 text-left', className)}
  65             >
  66                 <DropdownMenu>
  67                     {list.map(({ identifier, label, thumbColors }) => {
  68                         const id = `id_${identifier}`;
  69                         return (
  70                             <DropdownMenuButton
  71                                 key={label}
  72                                 isSelected={themeIdentifier === identifier}
  73                                 className={clsx('flex flex-nowrap items-center gap-3')}
  74                                 onClick={() => onChange(identifier)}
  75                             >
  76                                 <span className="w-custom" style={{ '--w-custom': '2.75rem' }}>
  77                                     <ThemeCard
  78                                         label={label}
  79                                         id={id}
  80                                         size="small"
  81                                         colors={thumbColors}
  82                                         selected={themeIdentifier === identifier}
  83                                         onChange={() => {}}
  84                                         as="div"
  85                                         className={clsx(
  86                                             'rounded-sm border',
  87                                             themeIdentifier === identifier ? 'border-primary' : 'border-weak'
  88                                         )}
  89                                         data-testid={`theme-card:theme-${label}`}
  90                                     />
  91                                 </span>
  92                                 <span className="">{label}</span>
  93                             </DropdownMenuButton>
  94                         );
  95                     })}
  96                 </DropdownMenu>
  97             </SimpleDropdown>
  98         </div>
  99     );
 100 };
 101
 102 export default ThemeSyncModeDropdown;