packages/pass/components/Layout/Panel/Panel.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import { CircleLoader, Scroll } from '@proton/atoms';
   4 import clsx from '@proton/utils/clsx';
   5
   6 import './Panel.scss';
   7
   8 type Props = {
   9     header?: ReactNode;
  10     footer?: ReactNode;
  11     children?: ReactNode;
  12     className?: string;
  13     unstyled?: boolean;
  14     loading?: boolean;
  15 };
  16
  17 export const Panel: FC<Props> = ({ header, footer, children, className, unstyled = false, loading }) => {
  18     return (
  19         <article className={clsx('pass-panel flex flex-column flex-nowrap', className)}>
  20             {header && <div className={clsx(!unstyled && 'shrink-0 px-4 py-3')}>{header}</div>}
  21             <div className="flex-auto h-full overflow-hidden relative">
  22                 {loading && <CircleLoader size="small" className="z-up absolute inset-center" />}
  23                 <Scroll
  24                     className={clsx(
  25                         'pass-panel--content absolute w-full h-full',
  26                         loading && 'opacity-30 pointer-events-none'
  27                     )}
  28                 >
  29                     <div className="px-4 pt-1 pb-3">{children}</div>
  30                 </Scroll>
  31             </div>
  32             {footer && <div className="shrink-0 px-4 py-3">{footer}</div>}
  33         </article>
  34     );
  35 };