packages/components/containers/themes/ThemeSyncModeCard.tsx

   1 import { c } from 'ttag';
   2
   3 import Icon from '@proton/components/components/icon/Icon';
   4 import Info from '@proton/components/components/link/Info';
   5 import type { ThemeTypes } from '@proton/shared/lib/themes/themes';
   6 import { PROTON_THEMES_MAP } from '@proton/shared/lib/themes/themes';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import type { Theme } from './ThemeCards';
  10 import ThemeCards from './ThemeCards';
  11 import type { ThemeSvgSize } from './ThemeSvg';
  12
  13 interface Props {
  14     mode: 'light' | 'dark';
  15     size?: ThemeSvgSize;
  16     minSize?: string;
  17     className?: string;
  18     listClassName?: string;
  19     themeIdentifier: ThemeTypes;
  20     list: Theme[];
  21     onChange: (themeType: ThemeTypes) => void;
  22     active: boolean;
  23 }
  24
  25 const ThemeSyncModeCard = ({
  26     mode,
  27     size = 'medium',
  28     className,
  29     listClassName,
  30     themeIdentifier,
  31     list,
  32     onChange,
  33     active,
  34 }: Props) => {
  35     return (
  36         <div className={clsx('border rounded-lg p-4', className)}>
  37             <div className={clsx(size !== 'small' && 'flex justify-space-between flex-nowrap gap-2', 'mb-4')}>
  38                 <div className="flex items-center flex-nowrap gap-2">
  39                     <Icon name={mode === 'light' ? 'sun' : 'moon'} className="shrink-0" />
  40                     <span className={clsx(active && 'text-semibold')}>
  41                         {mode === 'light' ? c('Title').t`Day theme` : c('Title').t`Night theme`}
  42                         {active && ` ${c('Title').t`(active)`}`}
  43                     </span>
  44                     <Info
  45                         title={
  46                             mode === 'light'
  47                                 ? c('Tooltip')
  48                                       .t`The selected theme will be active when your system is set to "light mode"`
  49                                 : c('Tooltip')
  50                                       .t`The selected theme will be active when your system is set to "dark mode"`
  51                         }
  52                     />
  53                 </div>
  54                 <div className={clsx(active && 'text-semibold', size === 'small' && 'ml-6')}>
  55                     {PROTON_THEMES_MAP[themeIdentifier].label}
  56                 </div>
  57             </div>
  58             <ThemeCards
  59                 size={size}
  60                 className={listClassName}
  61                 list={list}
  62                 themeIdentifier={themeIdentifier}
  63                 onChange={onChange}
  64             />
  65         </div>
  66     );
  67 };
  68
  69 export default ThemeSyncModeCard;