UpgradeCard.tsx raw

   1  import { SparklesIcon } from "lucide-react";
   2  import { Button } from "src/components/ui/button";
   3  import { UpgradeDialog } from "src/components/UpgradeDialog";
   4  
   5  interface Props {
   6    title: string;
   7    description: string;
   8  }
   9  
  10  const UpgradeCard: React.FC<Props> = ({
  11    title: message,
  12    description: subMessage,
  13  }) => {
  14    return (
  15      <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed p-8">
  16        <div className="flex flex-col items-center gap-1 text-center max-w-sm">
  17          <SparklesIcon className="w-12 h-12" />
  18          <h3 className="mt-4 text-lg font-semibold">{message}</h3>
  19          <p className="text-sm text-muted-foreground mb-5">{subMessage}</p>
  20          <UpgradeDialog>
  21            <Button>Upgrade</Button>
  22          </UpgradeDialog>
  23        </div>
  24      </div>
  25    );
  26  };
  27  
  28  export default UpgradeCard;
  29