feat: add source attr and some tooltips

listlessbird · Nov 8, 2024 · f7744a6 · f7744a6
1 parent 82d5311
commit f7744a6
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 51 deletions.
diff --git a/web/src/components/logo.tsx b/web/src/components/logo.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 export function Logo() {
   return (
     <div
-      className="p-2 rounded-full flex items-center justify-center size-10 bg-zinc-300 relative"
+      className="p-2 rounded-full flex items-center justify-center size-10  relative"
       //   style={{ backgroundColor: "rgb(185, 71, 52)", objectFit: "contain" }}
     >
       <Image

diff --git a/web/src/components/nav/header.tsx b/web/src/components/nav/header.tsx
@@ -6,36 +6,61 @@ import { useScroll } from "@/hooks/use-scroll";
 import Image from "next/image";
 import { UserButton } from "@/components/nav/user-button";
 import { Logo } from "@/components/logo";
+import { FaGithub } from "react-icons/fa6";
+import { Github } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function Header() {
   const scrolled = useScroll(5);
   const selectedLayout = useSelectedLayoutSegment();
 
   return (
-    <div
-      className={cn(
-        `sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200`,
-        {
-          "border-b border-gray-200 bg-white/75 backdrop-blur-lg": scrolled,
-          "border-b border-gray-200 bg-background": selectedLayout,
-        }
-      )}
-    >
-      <div className="flex h-[47px] items-center justify-between px-4">
-        <div className="flex items-center space-x-4">
-          <Link
-            href="/"
-            className="flex flex-row space-x-3 items-center justify-center py-2"
-          >
-            <Logo />
-            <span className="font-bold text-xl flex ">Sparkles</span>
-          </Link>
-        </div>
+    <TooltipProvider>
+      <div
+        className={cn(
+          `sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200`,
+          {
+            "border-b border-gray-200 bg-white/75 backdrop-blur-lg": scrolled,
+            "border-b border-gray-200 bg-background": selectedLayout,
+          }
+        )}
+      >
+        <div className="flex h-[47px] items-center justify-between px-4">
+          <div className="flex items-center space-x-4">
+            <Link
+              href="/"
+              className="flex flex-row space-x-3 items-center justify-center py-2"
+            >
+              <Logo />
+              <span className="font-bold text-xl flex ">Sparkles</span>
+            </Link>
+          </div>
 
-        <div className="hidden md:block">
-          <UserButton />
+          <div className="hidden md:block space-x-5">
+            {/* <div className="flex"> */}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/listlessbird/sparkles"
+              className="inline-block"
+            >
+              <Tooltip>
+                <TooltipTrigger>
+                  <Github className="size-8" />
+                </TooltipTrigger>
+                <TooltipContent>View Source</TooltipContent>
+              </Tooltip>
+            </a>
+            <UserButton />
+            {/* </div> */}
+          </div>
         </div>
       </div>
-    </div>
+    </TooltipProvider>
   );
 }
diff --git a/web/src/components/nav/user-button.tsx b/web/src/components/nav/user-button.tsx
@@ -20,6 +20,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Check, LogOutIcon, Monitor, Moon, Sun, UserIcon } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 export function UserButton({
   className,
 }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
@@ -28,40 +33,49 @@ export function UserButton({
   const queryClient = useQueryClient();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
+    <Tooltip>
+      <DropdownMenu>
+        <DropdownMenuTrigger
           className={cn("flex-none rounded-full", className)}
-          // {...props}
         >
           <div className="h-8 w-8 rounded-full bg-zinc-300 flex items-center justify-center text-center">
             {/* <span className="font-semibold text-sm">U</span> */}
-            <Image
-              src={user.picture}
-              alt="avatar"
-              className="h-8 w-8 rounded-full"
-              width={40}
-              height={40}
-            />
+            <TooltipTrigger asChild>
+              <Image
+                src={user.picture}
+                alt="avatar"
+                className="h-8 w-8 rounded-full"
+                width={40}
+                height={40}
+              />
+            </TooltipTrigger>
           </div>
 
           {/* <UserAvatar avatarUrl={user.avatarUrl} size={40} /> */}
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Logged in as @{user.username}</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={async () => {
-            queryClient.clear();
-            await logOut();
-          }}
-          className="cursor-pointer"
-        >
-          <LogOutIcon className="mr-2 size-4" />
-          Logout
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Logged in as @{user.username}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={async () => {
+              queryClient.clear();
+              await logOut();
+            }}
+            className="cursor-pointer"
+          >
+            <LogOutIcon className="mr-2 size-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <TooltipContent
+        side="bottom"
+        collisionPadding={{
+          right: 20,
+        }}
+      >
+        User Settings
+      </TooltipContent>
+    </Tooltip>
   );
 }