feat(integrations): added integrations page

Author: Davidthecode

apps/web/app/(main)/projects/[project]/settings/page-client.tsx

@@ -6,12 +6,13 @@ import type React from "react";
 import { useMemo, useState } from "react";
 import { DangerZone } from "@/components/settings/danger-zone";
 import { GeneralSettings } from "@/components/settings/general-settings";
+import { IntegrationSettings } from "@/components/settings/integrations";
 import { MemberSettings } from "@/components/settings/member/member-settings";
 import PageLoader from "@/components/shared/page-loader";
 import { useProjectSettings } from "@/lib/queries/project";
 import { useProject } from "@/providers/project";
 
-type SettingTab = "general" | "members" | "danger";
+type SettingTab = "general" | "members" | "integrations" | "danger";
 
 export default function PageClient() {
   const { projectId } = useProject();
@@ -28,6 +29,7 @@ export default function PageClient() {
       () => [
         { key: "general", label: "General", Icon: Settings },
         { key: "members", label: "Members", Icon: Users },
+        { key: "integrations", label: "Integrations", Icon: Users },
         { key: "danger", label: "Danger Zone", Icon: Trash2 },
       ],
       []
@@ -59,6 +61,8 @@ export default function PageClient() {
         );
       case "members":
         return <MemberSettings members={members} />;
+      case "integrations":
+        return <IntegrationSettings />;
       case "danger":
         return (
           <DangerZone

apps/web/components/settings/danger-zone.tsx

@@ -64,7 +64,7 @@ export const DangerZone = ({
           )}
         </div>
         <Button
-          className="ml-4 flex-shrink-0 bg-red-600 p-2 text-sm text-white hover:bg-red-700 disabled:bg-gray-400"
+          className="ml-4 shrink-0 bg-red-600 p-2 text-sm text-white hover:bg-red-700 disabled:bg-gray-400"
           disabled={!isOwner || isPending}
           onClick={handleDeleteClick}
         >

apps/web/components/settings/integrations.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Button } from "@flagix/ui/components/button";
+import Image from "next/image";
+
+interface Integration {
+  id: string;
+  name: string;
+  description: string;
+  logo: string;
+}
+
+const INTEGRATIONS: Integration[] = [
+  {
+    id: "slack",
+    name: "Slack",
+    description:
+      "Get real-time notifications in your Slack channels whenever flags are toggled.",
+    logo: "https://svgl.app/library/slack.svg",
+  },
+  {
+    id: "datadog",
+    name: "Datadog",
+    description:
+      "Sync feature flag events with your Datadog event stream to correlate rollouts with system performance.",
+    logo: "https://svgl.app/library/datadog.svg",
+  },
+  {
+    id: "sentry",
+    name: "Sentry",
+    description:
+      "Automatically tag Sentry events with the state of feature flags to debug crashes faster.",
+    logo: "https://svgl.app/library/sentry.svg",
+  },
+  {
+    id: "github",
+    name: "GitHub",
+    description:
+      "Link feature flags to pull requests and automate flag cleanup after code is merged.",
+    logo: "https://cdn.simpleicons.org/github",
+  },
+  {
+    id: "webhooks",
+    name: "Webhooks",
+    description:
+      "Build custom automation. Send flag change events to any URL via secure POST requests.",
+    logo: "https://unpkg.com/lucide-static@latest/icons/webhook.svg",
+  },
+];
+
+export function IntegrationSettings() {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col space-y-1">
+        <h2 className="font-semibold text-gray-900 text-lg">Integrations</h2>
+        <p className="text-gray-600 text-sm">
+          Connect Flagix with the tools your team already uses.
+        </p>
+      </div>
+
+      <div className="divide-y divide-gray-100 overflow-hidden rounded-xl border border-gray-200 bg-white">
+        {INTEGRATIONS.map((app) => (
+          <div
+            className="flex flex-col items-start justify-between gap-4 p-5 transition-colors hover:bg-gray-50/50 md:flex-row md:items-center"
+            key={app.id}
+          >
+            <div className="flex items-start gap-4">
+              <div className="relative mt-1 flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-gray-100 bg-white p-2.5 shadow-sm">
+                <Image
+                  alt={`${app.name} icon`}
+                  className="object-contain"
+                  height={28}
+                  src={app.logo}
+                  unoptimized
+                  width={28}
+                />
+              </div>
+
+              <div className="flex flex-col space-y-1">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-gray-900 text-sm">
+                    {app.name}
+                  </h3>
+                  <span className="inline-flex items-center rounded-full bg-emerald-50 px-2 py-0.5 font-medium text-[10px] text-emerald-700 ring-1 ring-emerald-600/20 ring-inset">
+                    Coming Soon
+                  </span>
+                </div>
+                <p className="max-w-xl text-[13px] text-gray-600 leading-relaxed">
+                  {app.description}
+                </p>
+              </div>
+            </div>
+
+            <Button
+              className="rounded-sm bg-emerald-600 px-5 py-2 font-medium text-white text-xs hover:bg-emerald-700 disabled:bg-gray-100 disabled:text-gray-400"
+              disabled={true}
+            >
+              Connect
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "svgl.app",
+      },
+    ],
+  },
+};
 
 export default nextConfig;