formbricks/packages/ui/Card/index.tsx

import { Button } from "../Button";

interface CardProps {
  connectText?: string;
  connectHref?: string;
  connectNewTab?: boolean;
  docsText?: string;
  docsHref?: string;
  docsNewTab?: boolean;
  label: string;
  description: string;
  icon?: React.ReactNode;
  connected?: boolean;
  statusText?: string;
}

export type { CardProps };

export const Card: React.FC<CardProps> = ({
  connectText,
  connectHref,
  connectNewTab,
  docsText,
  docsHref,
  docsNewTab,
  label,
  description,
  icon,
  connected,
  statusText,
}) => (
  <div className="relative rounded-lg bg-white p-8 text-left shadow-sm ">
    {connected != undefined && statusText != undefined && (
      <div className="absolute right-4 top-4 flex items-center rounded bg-slate-200 px-2 py-1 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
        {connected === true ? (
          <span className="relative mr-1 flex h-2 w-2">
            <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
            <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
          </span>
        ) : (
          <span className="relative mr-1 flex h-2 w-2">
            <span className="relative inline-flex h-2 w-2 rounded-full bg-gray-400"></span>
          </span>
        )}
        {statusText}
      </div>
    )}

    {icon && <div className="mb-6 h-8 w-8">{icon}</div>}
    <h3 className="text-lg font-bold text-slate-800">{label}</h3>
    <p className="text-xs text-slate-500">{description}</p>
    <div className="mt-4 flex space-x-2">
      {connectHref && (
        <Button href={connectHref} target={connectNewTab ? "_blank" : "_self"} size="sm" variant="darkCTA">
          {connectText}
        </Button>
      )}
      {docsHref && (
        <Button href={docsHref} target={docsNewTab ? "_blank" : "_self"} size="sm" variant="secondary">
          {docsText}
        </Button>
      )}
    </div>
  </div>
);