fix: add back social icon

janhq · May 30, 2024 · 1c1c6af · 1c1c6af
1 parent 2f0ab40
commit 1c1c6af
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/web/containers/Layout/BottomPanel/index.tsx b/web/containers/Layout/BottomPanel/index.tsx
@@ -1,5 +1,7 @@
+import { Button, Tooltip } from '@janhq/joi'
 import { useAtomValue } from 'jotai'
 
+import { FaGithub, FaDiscord } from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
 
 import DownloadingState from './DownloadingState'
@@ -13,6 +15,19 @@ import UpdatedFailedModal from './UpdateFailedModal'
 import { appDownloadProgressAtom } from '@/helpers/atoms/App.atom'
 import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
 
+const menuLinks = [
+  {
+    name: 'Discord',
+    icon: <FaDiscord size={16} className="flex-shrink-0" />,
+    link: 'https://discord.gg/FTk2MvZwJH',
+  },
+  {
+    name: 'Github',
+    icon: <FaGithub size={14} className="flex-shrink-0" />,
+    link: 'https://github.com/janhq/jan',
+  },
+]
+
 const BottomPanel = () => {
   const progress = useAtomValue(appDownloadProgressAtom)
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
@@ -41,6 +56,31 @@ const BottomPanel = () => {
         <span className="font-medium text-[hsla(var(--text-secondary))]">
           Jan v{VERSION ?? ''}
         </span>
+        <div className="ml-2 flex items-center">
+          {menuLinks
+            .filter((link) => !!link)
+            .map((link, i) => (
+              <div className="relative" key={i}>
+                <Tooltip
+                  withArrow={false}
+                  side="top"
+                  trigger={
+                    <Button theme="icon">
+                      <a
+                        href={link.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="relative flex w-full flex-shrink-0 items-center justify-center no-underline"
+                      >
+                        {link.icon}
+                      </a>
+                    </Button>
+                  }
+                  content={link.name}
+                />
+              </div>
+            ))}
+        </div>
       </div>
     </div>
   )