navbar: fix icons tooltip + open external links in new tab

themesberg · Jul 9, 2024 · 0eabe65 · 0eabe65
1 parent 825c6e8
commit 0eabe65
Showing 1 changed file with 25 additions and 22 deletions.
diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
@@ -43,34 +43,37 @@ export function NavbarIcons() {
       <div className="lg:hidden">
         <DocSearchInput />
       </div>
-      <a
-        href="https://storybook.flowbite-react.com/"
-        className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-      >
-        <Tooltip animation={false} content="View Storybook">
+      <Tooltip animation={false} content="View Storybook">
+        <a
+          target="_blank"
+          href="https://storybook.flowbite-react.com/"
+          className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+        >
           <SiStorybook aria-hidden className="size-5" />
-        </Tooltip>
-      </a>
-      <a
-        href="https://discord.gg/4eeurUVvTy"
-        className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-      >
-        <Tooltip animation={false} content="Join Discord Community">
+        </a>
+      </Tooltip>
+      <Tooltip animation={false} content="Join Discord Community">
+        <a
+          target="_blank"
+          href="https://discord.gg/4eeurUVvTy"
+          className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+        >
           <SiDiscord aria-hidden className="size-5" />
-        </Tooltip>
-      </a>
-      <a
-        href="https://github.com/themesberg/flowbite-react"
-        className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-      >
-        <Tooltip animation={false} content="View on GitHub">
+        </a>
+      </Tooltip>
+      <Tooltip animation={false} content="View on GitHub">
+        <a
+          target="_blank"
+          href="https://github.com/themesberg/flowbite-react"
+          className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 lg:block dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+        >
           <BsGithub aria-hidden className="size-5" />
-        </Tooltip>
-      </a>
+        </a>
+      </Tooltip>
       <Tooltip animation={false} content="Toggle dark mode">
         <DarkThemeToggle />
       </Tooltip>
-      <a href="https://npmjs.com/package/flowbite-react" className="ml-2 hidden lg:block">
+      <a target="_blank" href="https://npmjs.com/package/flowbite-react" className="ml-2 hidden lg:block">
         <Badge className="bg-primary-50 px-2 text-sm font-medium text-primary-700 hover:bg-primary-600 hover:text-white sm:block lg:block dark:bg-gray-700 dark:text-primary-500 dark:hover:bg-primary-800 dark:hover:text-white">
           v{version}
         </Badge>