packages/pass/components/Form/Field/Layout/FieldsetCluster.tsx

   1 import type { FC, PropsWithChildren } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 import './FieldsetCluster.scss';
   6
   7 type Props = PropsWithChildren<{
   8     as?: 'fieldset' | 'div' | 'span';
   9     className?: string;
  10     mode?: 'read' | 'write';
  11 }>;
  12
  13 export const FieldsetCluster: FC<Props> = ({ as: Component = 'fieldset', children, className, mode = 'write' }) => (
  14     <Component
  15         className={clsx(
  16             'pass-fieldset-cluster max-w-full border-none p-0 m-0 rounded-lg mb-2',
  17             mode === 'write' ? 'pass-fieldset-cluster--write' : 'pass-fieldset-cluster--read',
  18             className
  19         )}
  20         style={mode === 'write' ? { background: 'var(--field-norm)' } : undefined}
  21     >
  22         {children}
  23     </Component>
  24 );