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

   1 import type { FC, ReactNode } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 type Props = {
   6     className?: string;
   7     title?: ReactNode;
   8     subtitle?: ReactNode;
   9     actions?: ReactNode[];
  10 };
  11
  12 export const PanelHeader: FC<Props> = ({ className, actions, ...props }) => {
  13     const title = 'title' in props ? props.title : undefined;
  14     const subtitle = 'subtitle' in props ? props.subtitle : undefined;
  15     const withActions = Array.isArray(actions) && actions.length > 0;
  16     const onlyActions = withActions && [title, subtitle].every((prop) => prop === undefined);
  17
  18     return (
  19         <header
  20             className={clsx('pass-panel-header flex flex-nowrap justify-space-between items-center gap-4', className)}
  21         >
  22             {title !== undefined && (
  23                 <div>
  24                     {title}
  25                     {subtitle}
  26                 </div>
  27             )}
  28             {withActions && (
  29                 <div
  30                     className={clsx(
  31                         'flex flex-nowrap justify-space-between items-center shrink-0 gap-1',
  32                         onlyActions && 'w-full'
  33                     )}
  34                 >
  35                     {actions}
  36                 </div>
  37             )}
  38         </header>
  39     );
  40 };