fix: add webhook logo and card component flexibility

apps/web/app/(app)/environments/[environmentId]/integrations/page.tsx

@@ -2,6 +2,7 @@ import { Card } from "@formbricks/ui";
 import Image from "next/image";
 import JsLogo from "@/images/jslogo.png";
 import ZapierLogo from "@/images/zapier-small.png";
+import webhook from "@/images/webhook.png";
 
 export default function IntegrationsPage({ params }) {
   return (
@@ -11,26 +12,33 @@ export default function IntegrationsPage({ params }) {
       <div className="grid grid-cols-3 gap-6">
         <Card
           docsHref="https://formbricks.com/docs/getting-started/nextjs-app"
+          docsText="Docs"
+          docsNewTab={true}
           label="Javascript Widget"
           description="Integrate Formbricks into your Webapp"
-          newTab={true}
           icon={<Image src={JsLogo} alt="Javascript Logo" />}
         />
         <Card
           docsHref="https://formbricks.com/docs/integrations/zapier"
+          docsText="Docs"
+          docsNewTab={true}
           connectHref="https://zapier.com/apps/formbricks/integrations"
+          connectText="Connect"
+          connectNewTab={true}
           label="Zapier"
           description="Integrate Formbricks with 5000+ apps via Zapier"
-          newTab={true}
           icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
         />
         <Card
           connectHref={`/environments/${params.environmentId}/integrations/custom-webhook`}
+          connectText="Add Webhooks"
+          connectNewTab={false}
           docsHref="https://formbricks.com/docs/webhook-api/overview"
+          docsText="Docs"
+          docsNewTab={true}
           label="Custom Webhook"
           description="Trigger Webhooks based on actions in your surveys"
-          newTab={false}
-          icon={<Image src={JsLogo} alt="Javascript Logo" />}
+          icon={<Image src={webhook} alt="Javascript Logo" />}
         />
       </div>
     </div>

packages/ui/components/Card.tsx

@@ -1,30 +1,43 @@
 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;
-  newTab?: boolean;
 }
 
 export type { CardProps };
 
-export const Card: React.FC<CardProps> = ({ connectHref, docsHref, label, description, icon, newTab }) => (
+export const Card: React.FC<CardProps> = ({
+  connectText,
+  connectHref,
+  connectNewTab,
+  docsText,
+  docsHref,
+  docsNewTab,
+  label,
+  description,
+  icon,
+}) => (
   <div className="rounded-lg bg-white p-8 text-left shadow-sm ">
     {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={newTab ? "_blank" : "_self"} size="sm" variant="darkCTA">
-          Connect
+        <Button href={connectHref} target={connectNewTab ? "_blank" : "_self"} size="sm" variant="darkCTA">
+          {connectText}
         </Button>
       )}
       {docsHref && (
-        <Button href={docsHref} target={newTab ? "_blank" : "_self"} size="sm" variant="secondary">
-          Docs
+        <Button href={docsHref} target={docsNewTab ? "_blank" : "_self"} size="sm" variant="secondary">
+          {docsText}
         </Button>
       )}
     </div>