packages/pass/components/Layout/Card/LearnMoreCard.tsx

   1 import { type FC } from 'react';
   2
   3 import { Button, Card } from '@proton/atoms';
   4 import { Icon, type IconName } from '@proton/components';
   5 import clsx from '@proton/utils/clsx';
   6
   7 export type LearnMoreProps = {
   8     ctaLabel: string;
   9     description: string;
  10     icon: IconName;
  11     iconClassName?: string;
  12     title: string;
  13     ctaAction: () => void;
  14 };
  15
  16 export const LearnMoreCard: FC<LearnMoreProps> = ({ icon, iconClassName, title, description, ctaLabel, ctaAction }) => (
  17     <Card
  18         rounded
  19         className="text-lg overflow-hidden flex gap-4 md:gap-4 flex-nowrap md:flex-wrap items-center border-weak"
  20     >
  21         <Icon name={icon} size={8} color="var(--interaction-norm)" className={clsx('shrink-0', iconClassName)} />
  22         <div className="flex flex-column w-full gap-4">
  23             <span className="text-left text-rg color-strong text-bold">{title}</span>
  24             <span className="text-left text-sm color-weak">{description}</span>
  25             <Button shape="underline" color="norm" size="small" className="text-left text-sm" onClick={ctaAction}>
  26                 {ctaLabel}
  27             </Button>
  28         </div>
  29     </Card>
  30 );