"use client";
import React from "react";
import { IntegrationCardsGrid, IntegrationItem } from "@/components/ui/sayed-integration-cards";
import { Webhook } from "lucide-react";
// Native SVG Icons for crisp rendering in Light and Dark mode
const StripeLogo = (
<svg className="size-full text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor">
<path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.574-1.26 2.414-3.15 2.414-5.484 0-4.258-2.61-5.908-6.48-7.553z"/>
</svg>
);
const SlackLogo = (
<svg className="size-full" viewBox="0 0 127 127" fill="none">
<path d="M27.4 80c0 7.4-6 13.4-13.4 13.4S0 87.4 0 80s6-13.4 13.4-13.4H27.4V80zm6.7 0c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v33.5c0 7.4-6 13.4-13.4 13.4s-13.4-6-13.4-13.4V80z" fill="#E01E5A"/>
<path d="M47.5 27.4c-7.4 0-13.4-6-13.4-13.4S40.1 0 47.5 0s13.4 6 13.4 13.4v14H47.5zm0 6.7c7.4 0 13.4 6 13.4 13.4s-6 13.4-13.4 13.4H14c-7.4 0-13.4-6-13.4-13.4S6.6 34.1 14 34.1h33.5z" fill="#36C5F0"/>
<path d="M99.6 47.5c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4-6 13.4-13.4 13.4H99.6v-13.4zm-6.7 0c0 7.4-6 13.4-13.4 13.4s-13.4-6-13.4-13.4V14c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v33.5z" fill="#2EB67D"/>
<path d="M79.5 99.6c7.4 0 13.4 6 13.4 13.4s-6 13.4-13.4 13.4-13.4-6-13.4-13.4v-13.4h13.4zm0-6.7c-7.4 0-13.4-6-13.4-13.4s6-13.4 13.4-13.4h33.5c7.4 0 13.4 6 13.4 13.4s-6 13.4-13.4 13.4H79.5z" fill="#ECB22E"/>
</svg>
);
const ZapierLogo = (
<svg className="size-full text-[#FF4F00]" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0L1.5 12h8.5l-2.5 12 15-13.5h-9.5L18 0z" />
</svg>
);
const WebhookLogo = (
<Webhook className="size-full text-neutral-600 dark:text-neutral-300" />
);
export default function Demo() {
const sampleIntegrations: IntegrationItem[] = [
{
id: "stripe",
name: "Stripe",
slug: "stripe",
description: "Convert links into direct checkout links and track revenue conversions per short link.",
logo: StripeLogo,
projectId: "sayed_official",
verified: true,
installed: true,
},
{
id: "slack",
name: "Slack",
slug: "slack",
description: "Receive instant notifications in your Slack channels when high-priority links hit click milestones.",
logo: SlackLogo,
projectId: "community",
verified: true,
guideUrl: "https://sayed.app/docs/slack",
},
{
id: "zapier",
name: "Zapier",
slug: "zapier",
description: "Connect your links to 5,000+ web applications via automated triggers and actions.",
logo: ZapierLogo,
projectId: "community",
verified: true,
comingSoon: true,
},
{
id: "webhook",
name: "Custom Webhook Bot",
slug: "webhook",
description: "Dispatch real-time webhooks for click events to custom HTTP backends and serverless functions.",
logo: WebhookLogo,
projectId: "community",
verified: false,
},
];
return <IntegrationCardsGrid items={sampleIntegrations} />;
}
