packages/pass/components/Settings/SettingsPanel.tsx

   1 import type { FC, PropsWithChildren, ReactNode } from 'react';
   2
   3 import { Card } from '@proton/atoms';
   4 import clsx from '@proton/utils/clsx';
   5
   6 type Props = {
   7     actions?: ReactNode[];
   8     className?: string;
   9     contentClassname?: string;
  10     subTitle?: string;
  11     title: string;
  12 };
  13 export const SettingsPanel: FC<PropsWithChildren<Props>> = ({
  14     actions,
  15     children,
  16     className,
  17     contentClassname = 'flex flex-column flex-nowrap pt-4 pb-2',
  18     subTitle,
  19     title,
  20 }) => (
  21     <Card
  22         rounded
  23         className={clsx(
  24             'pass-settings--panel flex flex-nowrap flex-column p-5 mb-4 relative max-w-custom *:min-size-auto border-weak',
  25             className
  26         )}
  27         background={false}
  28     >
  29         <div className="flex flex-nowrap gap-2 items-start">
  30             <strong className="color-norm block mb-1 flex-1 text-ellipsis">{title}</strong>
  31             <div className="shrink-0">{actions}</div>
  32         </div>
  33         {subTitle && <em className="block text-sm color-weak mb-2">{subTitle}</em>}
  34         <hr className="mt-2 mb-0 shrink-0" />
  35         <div className={contentClassname}>{children}</div>
  36     </Card>
  37 );