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 @@ + + + Linear + + + + 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 @@ + + + Teams + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + +