Add tooltip

UTDNebula · Apr 29, 2023 · 5916c69 · 5916c69
1 parent b97b001
commit 5916c69
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,14 +2,16 @@ import { Analytics } from '@vercel/analytics/react';
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { IconButton, Card } from '@mui/material';
+import { IconButton, Card, Tooltip } from '@mui/material';
 import GitHub from '@mui/icons-material/GitHub';
 import { useMediaQuery } from '@mui/material';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const showGitInfo =
     typeof process.env.NEXT_PUBLIC_VERCEL_ENV !== 'undefined' &&
-    process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview';
+    process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview' &&
+    typeof process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA !== 'undefined' &&
+    process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA !== '';
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const darkModeElevation = prefersDarkMode ? 3 : 1;
 
@@ -27,18 +29,20 @@ function MyApp({ Component, pageProps }: AppProps) {
             className="w-fit h-fit bg-light fixed bottom-2 right-2 rounded-full"
             elevation={darkModeElevation}
           >
-            <a
-              href={
-                'https://github.com/UTDNebula/utd-trends/commit/' +
-                process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
-              }
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <IconButton size="large">
-                <GitHub className="fill-dark text-3xl" />
-              </IconButton>
-            </a>
+            <Tooltip title="Open GitHub commit in a new tab">
+              <a
+                href={
+                  'https://github.com/UTDNebula/utd-trends/commit/' +
+                  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
+                }
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <IconButton size="large">
+                  <GitHub className="fill-dark text-3xl" />
+                </IconButton>
+              </a>
+            </Tooltip>
           </Card>
         </>
       ) : null}