packages/components/containers/layouts/DensityRadiosCards.tsx

   1 import { c } from 'ttag';
   2
   3 import LayoutCards from '@proton/components/components/input/LayoutCards';
   4 import { DENSITY } from '@proton/shared/lib/constants';
   5 import comfortableDensitySvg from '@proton/styles/assets/img/layout/layout-thumb-density-comfortable.svg';
   6 import compactDensitySvg from '@proton/styles/assets/img/layout/layout-thumb-density-compact.svg';
   7
   8 const { COMFORTABLE, COMPACT } = DENSITY;
   9
  10 interface Props {
  11     density: DENSITY;
  12     onChange: (density: DENSITY) => void;
  13     loading: boolean;
  14     describedByID: string;
  15     className?: string;
  16     liClassName?: string;
  17 }
  18
  19 const DensityRadiosCards = ({ density, onChange, loading, className, liClassName, describedByID, ...rest }: Props) => {
  20     const layoutCardComfortable = {
  21         value: COMFORTABLE,
  22         selected: density === COMFORTABLE,
  23         disabled: loading,
  24         name: 'density',
  25         label: c('Label to change density').t`Comfortable`,
  26         onChange() {
  27             onChange(COMFORTABLE);
  28         },
  29         src: comfortableDensitySvg,
  30         describedByID,
  31     };
  32     const layoutCardCompact = {
  33         value: COMPACT,
  34         selected: density === COMPACT,
  35         disabled: loading,
  36         name: 'density',
  37         label: c('Label to change density').t`Compact`,
  38         onChange() {
  39             onChange(COMPACT);
  40         },
  41         src: compactDensitySvg,
  42         describedByID,
  43     };
  44
  45     return (
  46         <LayoutCards
  47             list={[layoutCardComfortable, layoutCardCompact]}
  48             className={className}
  49             liClassName={liClassName}
  50             describedByID={describedByID}
  51             {...rest}
  52         />
  53     );
  54 };
  55
  56 export default DensityRadiosCards;