diff --git a/apps/fabro-web/app/routes/settings-integrations.tsx b/apps/fabro-web/app/routes/settings-integrations.tsx
index f9467cb60..49e3a4abc 100644
--- a/apps/fabro-web/app/routes/settings-integrations.tsx
+++ b/apps/fabro-web/app/routes/settings-integrations.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
import type { ServerSettings } from "@qltysh/fabro-api-client";
import { useServerSettings } from "../lib/queries";
import {
@@ -46,12 +48,20 @@ export default function SettingsIntegrations() {
function ProjectManagementPanel() {
return (
-
+
Coming Soon
-
-
+
+
Coming Soon
-
+
);
}
@@ -60,7 +70,11 @@ function GithubPanel({ settings }: { settings: ServerSettings }) {
const { github } = settings.server.integrations;
return (
-
+
-
+
);
}
@@ -80,8 +94,9 @@ function SlackPanel({ settings }: { settings: ServerSettings }) {
const { slack } = settings.server.integrations;
return (
-
-
-
+
Coming Soon
-
-
+
Coming Soon
-
+
);
}
+function IntegrationRow({
+ slug,
+ name,
+ help,
+ children,
+}: {
+ slug: string;
+ name: string;
+ help: string;
+ children: ReactNode;
+}) {
+ return (
+
+
+
+ {name}
+ {help}
+
+
+ }
+ >
+ {children}
+
+ );
+}
+
+function IntegrationLogo({ slug, name }: { slug: string; name: string }) {
+ const [failed, setFailed] = useState(false);
+ const chip =
+ "grid size-10 shrink-0 place-items-center rounded-md bg-ice-50 ring-1 ring-line-strong";
+
+ if (failed) {
+ const initial = name.charAt(0).toUpperCase() || "?";
+ return (
+
+ {initial}
+
+ );
+ }
+
+ return (
+
+
setFailed(true)}
+ className="size-7"
+ />
+
+ );
+}
+
function IntegrationValue({
enabled,
detail,
diff --git a/apps/fabro-web/public/images/integrations/discord.svg b/apps/fabro-web/public/images/integrations/discord.svg
new file mode 100644
index 000000000..079b54bdd
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/discord.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/apps/fabro-web/public/images/integrations/github.svg b/apps/fabro-web/public/images/integrations/github.svg
new file mode 100644
index 000000000..bf0cf2677
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/github.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/apps/fabro-web/public/images/integrations/jira.svg b/apps/fabro-web/public/images/integrations/jira.svg
new file mode 100644
index 000000000..29f29a398
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/jira.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/apps/fabro-web/public/images/integrations/linear.svg b/apps/fabro-web/public/images/integrations/linear.svg
new file mode 100644
index 000000000..3b8722467
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/linear.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/apps/fabro-web/public/images/integrations/microsoft-teams.svg b/apps/fabro-web/public/images/integrations/microsoft-teams.svg
new file mode 100644
index 000000000..cae37a138
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/microsoft-teams.svg
@@ -0,0 +1,27 @@
+
+
diff --git a/apps/fabro-web/public/images/integrations/slack.svg b/apps/fabro-web/public/images/integrations/slack.svg
new file mode 100644
index 000000000..98dc80b26
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/slack.svg
@@ -0,0 +1,9 @@
+
+