packages/pass/components/Item/Containers/ItemContentView.tsx

   1 import { type FC } from 'react';
   2
   3 import { AliasContent } from '@proton/pass/components/Item/Alias/Alias.content';
   4 import { CreditCardContent } from '@proton/pass/components/Item/CreditCard/CreditCard.content';
   5 import { IdentityContent } from '@proton/pass/components/Item/Identity/Identity.content';
   6 import { presentListItem } from '@proton/pass/components/Item/List/utils';
   7 import { LoginContent } from '@proton/pass/components/Item/Login/Login.content';
   8 import { NoteContent } from '@proton/pass/components/Item/Note/Note.content';
   9 import { Card } from '@proton/pass/components/Layout/Card/Card';
  10 import { itemTypeToSubThemeClassName } from '@proton/pass/components/Layout/Theme/types';
  11 import type { ItemContentProps } from '@proton/pass/components/Views/types';
  12 import type { Item, ItemType } from '@proton/pass/types';
  13 import capitalize from '@proton/utils/capitalize';
  14 import clsx from '@proton/utils/clsx';
  15
  16 const itemContentViewMap: { [T in ItemType]: FC<ItemContentProps<T>> } = {
  17     alias: AliasContent,
  18     creditCard: CreditCardContent,
  19     login: LoginContent,
  20     note: NoteContent,
  21     identity: IdentityContent,
  22 };
  23
  24 export const ItemContentView: FC<ItemContentProps> = ({ revision, secureLinkItem }) => {
  25     const item = revision.data as Item;
  26     const Component = itemContentViewMap[item.type] as FC<ItemContentProps>;
  27     const { heading } = presentListItem(revision);
  28
  29     return (
  30         <Card className="border border-weak">
  31             <section className={clsx('text-left', itemTypeToSubThemeClassName[item.type])}>
  32                 <h3 className="text-bold mb-4">{capitalize(heading)}</h3>
  33                 <Component revision={revision} secureLinkItem={secureLinkItem} />
  34             </section>
  35         </Card>
  36     );
  37 };