packages/pass/components/Layout/Dropdown/MoreInfoDropdown.tsx

   1 import { type FC, useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import {
   6     Collapsible,
   7     CollapsibleContent,
   8     CollapsibleHeader,
   9     CollapsibleHeaderIconButton,
  10     Icon,
  11 } from '@proton/components';
  12
  13 type Props = { info: { label: string; values: string[] }[] };
  14
  15 export const MoreInfoDropdown: FC<Props> = ({ info }) => {
  16     const anchorRef = useRef<HTMLDivElement>(null);
  17     const handleClick = () => setTimeout(() => anchorRef?.current?.scrollIntoView({ behavior: 'smooth' }), 50);
  18
  19     return (
  20         <Collapsible>
  21             <CollapsibleHeader
  22                 disableFullWidth
  23                 onClick={handleClick}
  24                 className="pt-2 text-sm"
  25                 suffix={
  26                     <CollapsibleHeaderIconButton className="p-0" onClick={handleClick}>
  27                         <Icon name="chevron-down" className="color-weak" />
  28                     </CollapsibleHeaderIconButton>
  29                 }
  30             >
  31                 <span className="flex items-center color-weak text-semibold">
  32                     <Icon className="mr-2" name="info-circle" />
  33                     <span>{c('Button').t`More info`}</span>
  34                 </span>
  35             </CollapsibleHeader>
  36             <CollapsibleContent className="color-weak pt-4 text-sm">
  37                 {info.map(({ label, values }, idx) => (
  38                     <div
  39                         className="flex mb-2"
  40                         key={`${label}-${idx}`}
  41                         {...(idx === info.length - 1 ? { ref: anchorRef } : {})}
  42                     >
  43                         <div className="mr-6 text-right w-custom" style={{ '--w-custom': '5rem' }}>{`${label}:`}</div>
  44                         <div className="flex-1 text-break">
  45                             {values.map((value) => (
  46                                 <div key={value}>{value}</div>
  47                             ))}
  48                         </div>
  49                     </div>
  50                 ))}
  51             </CollapsibleContent>
  52         </Collapsible>
  53     );
  54 };