From 3362b7d6be2fdc3296e52f08e7733a91ba122f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Francisco?=
 <4301103+tomasfrancisco@users.noreply.github.com>
Date: Fri, 13 Sep 2024 13:54:41 +0200
Subject: [PATCH] add tabs to integrations page (#15)

---
 apps/dashboard/src/app/(home)/layout.tsx      |  4 +-
 .../src/app/app/integrations/page.tsx         | 44 +++++++++++++++--
 .../providers/figma/_components/banner.tsx    | 29 ++++++++++++
 .../providers/figma/_components/index.ts      |  1 +
 .../providers/github/_components/provider.tsx | 47 ++++++++++---------
 apps/dashboard/src/app/app/layout.tsx         |  4 --
 apps/dashboard/src/app/app/page.tsx           |  8 ++--
 .../{navigation.tsx => app-navigation.tsx}    | 11 +++--
 .../src/components/app-navigation/index.ts    |  2 +-
 .../community-banner/community-banner.tsx     |  3 +-
 .../src/components/footer/footer.tsx          |  3 +-
 .../assets/ds-logo.svg                        |  0
 .../home-navigation.tsx}                      |  2 +-
 .../src/components/home-navigation/index.ts   |  1 +
 .../src/components/navigation-bar/index.ts    |  1 -
 apps/dashboard/src/config.ts                  |  1 +
 packages/components/src/badge/badge.tsx       | 37 +++++++++++++++
 packages/components/src/badge/index.ts        |  1 +
 packages/components/src/index.ts              |  1 +
 19 files changed, 153 insertions(+), 47 deletions(-)
 create mode 100644 apps/dashboard/src/app/app/integrations/providers/figma/_components/banner.tsx
 rename apps/dashboard/src/components/app-navigation/{navigation.tsx => app-navigation.tsx} (96%)
 rename apps/dashboard/src/components/{navigation-bar => home-navigation}/assets/ds-logo.svg (100%)
 rename apps/dashboard/src/components/{navigation-bar/navigation-bar.tsx => home-navigation/home-navigation.tsx} (96%)
 create mode 100644 apps/dashboard/src/components/home-navigation/index.ts
 delete mode 100644 apps/dashboard/src/components/navigation-bar/index.ts
 create mode 100644 packages/components/src/badge/badge.tsx
 create mode 100644 packages/components/src/badge/index.ts

diff --git a/apps/dashboard/src/app/(home)/layout.tsx b/apps/dashboard/src/app/(home)/layout.tsx
index c909d7a..b7f55a7 100644
--- a/apps/dashboard/src/app/(home)/layout.tsx
+++ b/apps/dashboard/src/app/(home)/layout.tsx
@@ -1,5 +1,5 @@
 import { Footer } from '@/components/footer';
-import { NavigationBar } from '@/components/navigation-bar/navigation-bar';
+import { HomeNavigation } from '@/components/home-navigation';
 import './home.css';
 
 export default function Layout({
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <div className="landing-bg" />
       <header className="sticky top-0 w-full flex justify-center">
-        <NavigationBar />
+        <HomeNavigation />
       </header>
       <main className="flex min-h-screen w-full flex-col items-center py-2">
         {children}
diff --git a/apps/dashboard/src/app/app/integrations/page.tsx b/apps/dashboard/src/app/app/integrations/page.tsx
index 8f2066a..91e4c1f 100644
--- a/apps/dashboard/src/app/app/integrations/page.tsx
+++ b/apps/dashboard/src/app/app/integrations/page.tsx
@@ -1,6 +1,14 @@
 import { MainContent } from '@/components';
 import { GithubProvider } from './providers/github/_components';
-import { FigmaProvider } from './providers/figma/_components';
+import { FigmaBanner } from './providers/figma/_components';
+import {
+  Icons,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text,
+} from '@ds-project/components';
 
 export default function Page() {
   return (
@@ -8,10 +16,36 @@ export default function Page() {
       description="Authorize and manage integrations"
       title="Integrations"
     >
-      <div className="flex flex-col gap-2">
-        <GithubProvider />
-        <FigmaProvider />
-      </div>
+      <div className="flex flex-col gap-2"></div>
+      <Tabs defaultValue="inputs">
+        <TabsList>
+          <TabsTrigger value="inputs">Inputs</TabsTrigger>
+          <TabsTrigger value="outputs">Outputs</TabsTrigger>
+          <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+        </TabsList>
+        <TabsContent value="inputs">
+          <FigmaBanner />
+        </TabsContent>
+        <TabsContent value="outputs">
+          <GithubProvider />
+        </TabsContent>
+        <TabsContent value="monitoring">
+          <div className=" flex items-center space-x-4 rounded-md border p-4 opacity-50">
+            <Icons.DiscordLogoIcon height={54} width={54} />
+            <div className="flex-1 space-y-1">
+              <Text size="base" weight="medium">
+                <h2>Discord</h2>
+              </Text>
+              <Text mood="muted" size="sm">
+                <p>
+                  Send notifications about changes, releases or issues with your
+                  configuration.
+                </p>
+              </Text>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
     </MainContent>
   );
 }
diff --git a/apps/dashboard/src/app/app/integrations/providers/figma/_components/banner.tsx b/apps/dashboard/src/app/app/integrations/providers/figma/_components/banner.tsx
new file mode 100644
index 0000000..db3108a
--- /dev/null
+++ b/apps/dashboard/src/app/app/integrations/providers/figma/_components/banner.tsx
@@ -0,0 +1,29 @@
+import { Button, Icons, Text } from '@ds-project/components';
+import Link from 'next/link';
+export function FigmaBanner() {
+  return (
+    <div className=" flex items-center space-x-4 rounded-md border p-4">
+      <Icons.FigmaLogoIcon height={54} width={54} />
+      <div className="flex-1 space-y-1">
+        <Text size="base" weight="medium">
+          <h2>Figma</h2>
+        </Text>
+        <Text mood="muted" size="sm">
+          <p>
+            Install DS Pro widget in your Figma file to synchronize Figma
+            Variables
+          </p>
+        </Text>
+      </div>
+
+      <Button asChild>
+        <Link
+          href="https://www.figma.com/community/file/1415369860836124974"
+          target="__blank"
+        >
+          <span>Install Widget</span>
+        </Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/app/integrations/providers/figma/_components/index.ts b/apps/dashboard/src/app/app/integrations/providers/figma/_components/index.ts
index 03be03e..f9017e0 100644
--- a/apps/dashboard/src/app/app/integrations/providers/figma/_components/index.ts
+++ b/apps/dashboard/src/app/app/integrations/providers/figma/_components/index.ts
@@ -1 +1,2 @@
 export * from './provider';
+export * from './banner';
diff --git a/apps/dashboard/src/app/app/integrations/providers/github/_components/provider.tsx b/apps/dashboard/src/app/app/integrations/providers/github/_components/provider.tsx
index be366d4..acdfaa9 100644
--- a/apps/dashboard/src/app/app/integrations/providers/github/_components/provider.tsx
+++ b/apps/dashboard/src/app/app/integrations/providers/github/_components/provider.tsx
@@ -1,7 +1,9 @@
 import {
   Button,
+  FormItem,
   Icons,
   Input,
+  Label,
   Select,
   SelectContent,
   SelectItem,
@@ -49,22 +51,25 @@ export async function GithubProvider() {
       </div>
 
       {githubIntegration ? (
-        <form action={selectRepository} className="flex gap-2">
-          <Select
-            defaultValue={githubIntegration.data.repositoryId?.toString()}
-            name="repositoryId"
-          >
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Repositories" />
-            </SelectTrigger>
-            <SelectContent>
-              {repositories?.map((repository) => (
-                <SelectItem key={repository.id} value={String(repository.id)}>
-                  {repository.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <form action={selectRepository} className="flex gap-2 items-end">
+          <FormItem>
+            <Label>Repository</Label>
+            <Select
+              defaultValue={githubIntegration.data.repositoryId?.toString()}
+              name="repositoryId"
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Repositories" />
+              </SelectTrigger>
+              <SelectContent>
+                {repositories?.map((repository) => (
+                  <SelectItem key={repository.id} value={String(repository.id)}>
+                    {repository.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormItem>
           <Input
             name="installationId"
             type="hidden"
@@ -75,15 +80,15 @@ export async function GithubProvider() {
         </form>
       ) : null}
 
-      <Button asChild variant={isInstallationActive ? 'outline' : 'default'}>
+      <Button
+        asChild
+        variant={isInstallationActive ? 'outline' : 'default'}
+        className="self-end"
+      >
         <Link href={installationUrl}>
           {isInstallationActive ? 'Configure' : 'Authorize'}
         </Link>
       </Button>
-
-      {/* <Button>
-        <Link href="/integrations/providers/github">Tokens</Link>
-      </Button> */}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/app/layout.tsx b/apps/dashboard/src/app/app/layout.tsx
index c42582f..7ad1cd1 100644
--- a/apps/dashboard/src/app/app/layout.tsx
+++ b/apps/dashboard/src/app/app/layout.tsx
@@ -1,11 +1,7 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import '../globals.css';
 import { AppNavigation } from '@/components';
 import { api } from '@ds-project/api/rsc';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
   title: 'DS Project',
   description: 'Manage Design System',
diff --git a/apps/dashboard/src/app/app/page.tsx b/apps/dashboard/src/app/app/page.tsx
index 7e0d2eb..ee90fea 100644
--- a/apps/dashboard/src/app/app/page.tsx
+++ b/apps/dashboard/src/app/app/page.tsx
@@ -1,7 +1,5 @@
+import { redirect } from 'next/navigation';
+
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Home page</h1>
-    </main>
-  );
+  return redirect('/app/integrations');
 }
diff --git a/apps/dashboard/src/components/app-navigation/navigation.tsx b/apps/dashboard/src/components/app-navigation/app-navigation.tsx
similarity index 96%
rename from apps/dashboard/src/components/app-navigation/navigation.tsx
rename to apps/dashboard/src/components/app-navigation/app-navigation.tsx
index 24cf77f..ed6b6b6 100644
--- a/apps/dashboard/src/components/app-navigation/navigation.tsx
+++ b/apps/dashboard/src/components/app-navigation/app-navigation.tsx
@@ -16,6 +16,7 @@ import { cn } from '@/lib/css';
 import { HomeButton } from '../home-button';
 import type { SelectProjects } from '@ds-project/database/schema';
 import { AccountMenu } from '../account-menu/acocunt-menu';
+import { config } from '@/config';
 
 interface AppNavigationProps {
   className?: string;
@@ -59,16 +60,16 @@ export function AppNavigation({
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
-              <Link href="/app/tokens" legacyBehavior passHref>
+              <Link href="/app/integrations" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Tokens
+                  Integrations
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
             <NavigationMenuItem>
-              <Link href="/app/integrations" legacyBehavior passHref>
+              <Link href="/app/tokens" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Integrations
+                  Tokens
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
@@ -88,7 +89,7 @@ export function AppNavigation({
           </Link>
         </Button>
         <Button variant="ghost" size="icon" title="Discord" asChild>
-          <Link href="https://discord.gg/AKza6Mqr" target="_blank">
+          <Link href={config.discordInviteUrl} target="_blank">
             <Icons.DiscordLogoIcon />
           </Link>
         </Button>
diff --git a/apps/dashboard/src/components/app-navigation/index.ts b/apps/dashboard/src/components/app-navigation/index.ts
index 701e505..202f5fd 100644
--- a/apps/dashboard/src/components/app-navigation/index.ts
+++ b/apps/dashboard/src/components/app-navigation/index.ts
@@ -1 +1 @@
-export * from './navigation';
+export * from './app-navigation';
diff --git a/apps/dashboard/src/components/banners/community-banner/community-banner.tsx b/apps/dashboard/src/components/banners/community-banner/community-banner.tsx
index d214570..5447340 100644
--- a/apps/dashboard/src/components/banners/community-banner/community-banner.tsx
+++ b/apps/dashboard/src/components/banners/community-banner/community-banner.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import discordIcon from './discord-icon.png';
 import { Button } from '@/components/button';
+import { config } from '@/config';
 
 export function CommunityBanner() {
   return (
@@ -17,7 +18,7 @@ export function CommunityBanner() {
       </header>
       <div className="flex gap-2">
         <Button asChild>
-          <Link href="https://discord.gg/AKza6Mqr">
+          <Link href={config.discordInviteUrl}>
             <Icons.DiscordLogoIcon className="mr-2" /> Join our Discord
           </Link>
         </Button>
diff --git a/apps/dashboard/src/components/footer/footer.tsx b/apps/dashboard/src/components/footer/footer.tsx
index 7c75026..70694b0 100644
--- a/apps/dashboard/src/components/footer/footer.tsx
+++ b/apps/dashboard/src/components/footer/footer.tsx
@@ -2,6 +2,7 @@ import { Icons, Text } from '@ds-project/components';
 import Link from 'next/link';
 import { Button } from '../button';
 import { CommunityBanner } from '../banners/community-banner';
+import { config } from '@/config';
 
 export function Footer() {
   return (
@@ -11,7 +12,7 @@ export function Footer() {
           <CommunityBanner />
           <div className="flex gap-2">
             <Button asChild mode="dark" size="icon">
-              <Link href="https://discord.gg/AKza6Mqr">
+              <Link href={config.discordInviteUrl}>
                 <Icons.DiscordLogoIcon />
               </Link>
             </Button>
diff --git a/apps/dashboard/src/components/navigation-bar/assets/ds-logo.svg b/apps/dashboard/src/components/home-navigation/assets/ds-logo.svg
similarity index 100%
rename from apps/dashboard/src/components/navigation-bar/assets/ds-logo.svg
rename to apps/dashboard/src/components/home-navigation/assets/ds-logo.svg
diff --git a/apps/dashboard/src/components/navigation-bar/navigation-bar.tsx b/apps/dashboard/src/components/home-navigation/home-navigation.tsx
similarity index 96%
rename from apps/dashboard/src/components/navigation-bar/navigation-bar.tsx
rename to apps/dashboard/src/components/home-navigation/home-navigation.tsx
index 26e289b..8ee2216 100644
--- a/apps/dashboard/src/components/navigation-bar/navigation-bar.tsx
+++ b/apps/dashboard/src/components/home-navigation/home-navigation.tsx
@@ -13,7 +13,7 @@ const navigationItems = [
     href: '#community',
   },
 ];
-export function NavigationBar() {
+export function HomeNavigation() {
   return (
     <nav className="bg-white border border-gray-300 rounded-xl flex p-2 shadow m-3 justify-between max-w-screen-sm gap-4">
       <Button variant="ghost">
diff --git a/apps/dashboard/src/components/home-navigation/index.ts b/apps/dashboard/src/components/home-navigation/index.ts
new file mode 100644
index 0000000..afd8e12
--- /dev/null
+++ b/apps/dashboard/src/components/home-navigation/index.ts
@@ -0,0 +1 @@
+export * from './home-navigation';
diff --git a/apps/dashboard/src/components/navigation-bar/index.ts b/apps/dashboard/src/components/navigation-bar/index.ts
deleted file mode 100644
index c9099a2..0000000
--- a/apps/dashboard/src/components/navigation-bar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-bar';
diff --git a/apps/dashboard/src/config.ts b/apps/dashboard/src/config.ts
index 450009a..275a9b5 100644
--- a/apps/dashboard/src/config.ts
+++ b/apps/dashboard/src/config.ts
@@ -16,4 +16,5 @@ export const config = {
   FIGMA_KEY: 'figma.key',
   figmaRedirectUri: `${pageUrl}/integrations/providers/figma/callback`,
   gitTokensPath: 'packages/generator/tokens',
+  discordInviteUrl: 'https://discord.gg/FQSYMapc76',
 } as const;
diff --git a/packages/components/src/badge/badge.tsx b/packages/components/src/badge/badge.tsx
new file mode 100644
index 0000000..6d2507a
--- /dev/null
+++ b/packages/components/src/badge/badge.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils';
+
+const badgeVariants = cva(
+  'ds-inline-flex ds-items-center ds-rounded-full ds-border ds-px-2.5 ds-py-0.5 ds-text-xs ds-font-semibold ds-transition-colors focus:ds-outline-none focus:ds-ring-2 focus:ds-ring-ring focus:ds-ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'ds-border-transparent ds-bg-primary ds-text-primary-foreground hover:ds-bg-primary/80',
+        secondary:
+          'ds-border-transparent ds-bg-secondary ds-text-secondary-foreground hover:ds-bg-secondary/80',
+        destructive:
+          'ds-border-transparent ds-bg-destructive ds-text-destructive-foreground hover:ds-bg-destructive/80',
+        outline: 'ds-text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/packages/components/src/badge/index.ts b/packages/components/src/badge/index.ts
new file mode 100644
index 0000000..1566eee
--- /dev/null
+++ b/packages/components/src/badge/index.ts
@@ -0,0 +1 @@
+export * from './badge';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 83e3da6..4bd5ed4 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,6 +1,7 @@
 export * from './alert';
 export * from './aspect-ratio';
 export * from './avatar';
+export * from './badge';
 export * from './breadcrumb';
 export * from './button';
 export * from './card';