feat(ui): add IDE links on the home page (#2106)

* feat(ui): add ide links on the home page * icon-only * clean * [autofix.ci] apply automated fixes * Update ee/tabby-ui/app/(home)/page.tsx --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Meng Zhang <[email protected]>
TabbyML · May 14, 2024 · ec7166e · ec7166e
1 parent 346f4ff
commit ec7166e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 2 deletions.
diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { noop } from 'lodash-es'
 
@@ -17,14 +18,21 @@ import {
   IconChat,
   IconCode,
   IconGear,
+  IconJetBrains,
   IconLogout,
   IconMail,
   IconRotate,
-  IconSpinner
+  IconSpinner,
+  IconVSCode
 } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
 import { CopyButton } from '@/components/copy-button'
 import SlackDialog from '@/components/slack-dialog'
 import { ThemeToggle } from '@/components/theme-toggle'
@@ -100,10 +108,50 @@ function Configuration({ className }: { className?: string }) {
           for details
         </span>
       </CardFooter>
+
+      <div className="mb-6 mt-3 flex gap-x-3 lg:mb-0">
+        <IDELink
+          href="https://marketplace.visualstudio.com/items?itemName=TabbyML.vscode-tabby"
+          name="Visual Studio Code"
+          icon={<IconVSCode className="h-5 w-5" />}
+        />
+        <IDELink
+          href="https://plugins.jetbrains.com/plugin/22379-tabby"
+          name="JetBrains"
+          icon={<IconJetBrains className="h-5 w-5" />}
+        />
+      </div>
     </div>
   )
 }
 
+function IDELink({
+  href,
+  name,
+  icon
+}: {
+  href: string
+  name: string
+  icon: React.ReactNode
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Link
+          href={href}
+          className="transition-all hover:opacity-80 dark:text-muted-foreground"
+          target="_blank"
+        >
+          {icon}
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 function MainPanel() {
   const { data: healthInfo } = useHealth()
   const [{ data }] = useMe()

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -1414,6 +1414,42 @@ const IconGitFork = ({
   <GitFork className={cn('h4 w-4', className)} {...props} />
 )
 
+function IconVSCode({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('h-4 w-4', className)}
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M746.222933 102.239573l-359.799466 330.820267L185.347413 281.4976 102.2464 329.864533l198.20544 182.132054-198.20544 182.132053 83.101013 48.510293 201.076054-151.558826 359.799466 330.676906 175.527254-85.251413V187.4944z m0 217.57952v384.341334l-255.040853-192.177494z" />
+    </svg>
+  )
+}
+
+function IconJetBrains({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('h-4 w-4', className)}
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M64 960h896V64H64z" />
+      <path
+        d="M161.51 848.32h336V792h-336zM197.4 318.72a53 53 0 0 0 38.4-14.08 51.76 51.76 0 0 0 12.8-39V176h-38.4v89.6c0 12.8-6.4 19.2-16 19.2-9-0.64-17.28-5.12-21.76-12.8l-25 23.68a57.67 57.67 0 0 0 49.96 23.04zM303.36 230.4v-21.76h74.88V176H265.6v139.52h113.28v-33.28h-74.24v-22.4h65.92V230.4zM433.09 316.16h39V209.92h42.24V176H391.49v33.92h41.6zM228.88 371.22a55.87 55.87 0 0 1 38.4 12.8 32 32 0 0 1 9 22.4c0 14.08-8.32 26.88-21.76 31.36 16.64 3.2 28.16 17.28 27.52 33.92 0 24.28-19.2 39-52.48 39H163V371.22zM220 402.54h-19.2v24.32h18.56c11.381 0 18.39-3.748 18.557-11.861l0.003-0.299c-0.01-7.7-6.41-12.16-17.92-12.16z m-19.2 51.67v25.6h24.32c11.52 0 18.56-4.48 18.56-12.8 0-7-6.4-12.8-19.2-12.8h-23.69 0.01zM356.91 371.19a64.87 64.87 0 0 1 44.8 15.36c8.96 8.32 13.44 19.84 13.44 32.64 0.64 18.56-11.52 35.81-28.8 42.88l33.28 48.64h-44.8l-28.16-42.24h-12.8v42.24h-38.4V371.19z m-1.6 34.04h-21.76v33.92l21.76-0.64c12.8 0 20.48-6.4 20.48-16.64 0-10.88-7.68-16.64-20.48-16.64z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M505.9 370.13l59.52 140.8h-41.6l-9.6-25h-54.4l-10.24 25h-40.32l59.52-140.8h37.12z m-18.22 46l-16 39.68h30.72l-14.72-39.68zM571.14 511h39V370.88h-39zM715.78 511h33.92V370.88h-38.4v74.88l-50.56-74.88H624.9V511h38.4v-76.8zM816.47 401.36c14.08 0 27.52 5.12 39 13.44l18.56-27.52a88.83 88.83 0 0 0-57.6-18.56c-33.28 0-53.76 19.2-53.76 44.8 0 28.8 22.4 37.12 52.48 43.52 19.2 5.12 23.68 7.68 23.68 14.08 0 5.76-5.76 9.6-16 9.6-16.64-0.64-32.64-6.4-44.8-16.64l-21.76 25.6c18.56 14.72 41.6 23 64.64 22.4 34.56 0 57-16.64 57-44.8 0-26.24-19.2-36.48-51.2-43.52-19.84-4.48-24.32-7-24.32-13.44 0-5.12 4.48-8.96 14.08-8.96z"
+        fill="#FFFFFF"
+      />
+    </svg>
+  )
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1487,5 +1523,7 @@ export {
   IconMail,
   IconChevronsDownUp,
   IconStar,
-  IconGitFork
+  IconGitFork,
+  IconVSCode,
+  IconJetBrains
 }