chore: upselling UI (#4491)

apps/web/modules/ui/components/empty-content/index.tsx

@@ -1,46 +0,0 @@
-import { Button } from "@/modules/ui/components/button";
-import { Muted, P } from "@/modules/ui/components/typography";
-
-export type ModalButton = {
-  text: string;
-  href?: string;
-  onClick?: () => void;
-};
-
-interface EmptyContentProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  buttons: [ModalButton, ModalButton];
-}
-
-export const EmptyContent = ({ icon, title, description, buttons }: EmptyContentProps) => {
-  const [primaryButton, secondaryButton] = buttons;
-
-  return (
-    <div className="flex flex-col items-center gap-6 p-6">
-      <div className="rounded-md border border-slate-200 p-3">{icon}</div>
-      <div className="flex flex-col items-center gap-2">
-        <P className="text-xl font-semibold text-slate-900">{title}</P>
-        <Muted className="text-slate-500">{description}</Muted>
-      </div>
-      <div className="flex gap-3">
-        <Button
-          {...(primaryButton.href
-            ? { href: primaryButton.href, target: "_blank", rel: "noopener noreferrer" }
-            : {})}
-          {...(primaryButton.onClick ? { onClick: primaryButton.onClick } : {})}>
-          {primaryButton.text}
-        </Button>
-        <Button
-          variant="secondary"
-          {...(secondaryButton.href
-            ? { href: secondaryButton.href, target: "_blank", rel: "noopener noreferrer" }
-            : {})}
-          {...(secondaryButton.onClick ? { onClick: secondaryButton.onClick } : {})}>
-          {secondaryButton.text}
-        </Button>
-      </div>
-    </div>
-  );
-};

apps/web/modules/ui/components/upgrade-plan-notice/index.tsx

@@ -1,27 +0,0 @@
-import { Alert, AlertDescription } from "@/modules/ui/components/alert";
-import { Badge } from "@/modules/ui/components/badge";
-import Link from "next/link";
-
-export const UpgradePlanNotice = ({
-  message,
-  url,
-  textForUrl,
-}: {
-  message: string;
-  url: string;
-  textForUrl: string;
-}) => {
-  return (
-    <Alert className="mt-1.5 flex items-center bg-slate-50">
-      <Badge size="tiny" text="Pro" type="success" />
-      <AlertDescription className="ml-2">
-        <span className="mr-1 text-slate-600">{message}</span>
-        <span className="underline">
-          <Link href={url} target="_blank">
-            {textForUrl}
-          </Link>
-        </span>
-      </AlertDescription>
-    </Alert>
-  );
-};

apps/web/modules/ui/components/upgrade-prompt/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/modules/ui/components/button";
+import { KeyIcon } from "lucide-react";
 import Link from "next/link";
 
 export type ModalButton = {
@@ -8,18 +9,19 @@ export type ModalButton = {
 };
 
 interface UpgradePromptProps {
-  icon: React.ReactNode;
   title: string;
-  description: string;
+  description?: string;
   buttons: [ModalButton, ModalButton];
 }
 
-export const UpgradePrompt = ({ icon, title, description, buttons }: UpgradePromptProps) => {
+export const UpgradePrompt = ({ title, description, buttons }: UpgradePromptProps) => {
   const [primaryButton, secondaryButton] = buttons;
 
   return (
     <div className="flex w-full flex-col items-center gap-6 p-6">
-      <div className="rounded-md border border-slate-200 p-3">{icon}</div>
+      <div className="rounded-md border border-slate-200 p-3">
+        <KeyIcon className="h-6 w-6 text-slate-900" />
+      </div>
       <div className="flex max-w-[80%] flex-col items-center gap-2 text-center">
         <p className="text-xl font-semibold text-slate-900">{title}</p>
         <p className="text-sm text-slate-500">{description}</p>