add tabs to integrations page (#15)

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}

apps/dashboard/src/app/app/integrations/page.tsx

@@ -1,17 +1,51 @@
 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 (
     <MainContent
       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>
   );
 }

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>
+  );
+}

apps/dashboard/src/app/app/integrations/providers/figma/_components/index.ts

@@ -1 +1,2 @@
 export * from './provider';
+export * from './banner';

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>
   );
 }

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',

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');
 }

apps/dashboard/src/components/app-navigation/navigation.tsx → 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>

apps/dashboard/src/components/app-navigation/index.ts

@@ -1 +1 @@
-export * from './navigation';
+export * from './app-navigation';

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>

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>

apps/dashboard/src/components/navigation-bar/navigation-bar.tsx → 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">

apps/dashboard/src/components/home-navigation/index.ts

@@ -0,0 +1 @@
+export * from './home-navigation';

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;

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 };

packages/components/src/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge';

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';