feat: integrate Tooltip into ProjectCard component

Author: babblebey

app/(www)/page.tsx

@@ -98,7 +98,7 @@ export default async function IndexPage() {
         </div>
       </section>
 
-      <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32" id="tools">
+      <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32" id="projects">
         <div className="flex max-w-5xl flex-col gap-6">
           <h2 className="font-heading font-bold tracking-tight text-4xl sm:text-5xl md:text-[4.8rem]">
             Projects

components/project-card.tsx

@@ -6,6 +6,12 @@ import {
   CardHeader,
   CardTitle
 } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { categories } from "@/data/projects";
 import { Icons } from "./icons";
 import Link from "next/link";
@@ -48,9 +54,18 @@ export function ProjectCard({ title, desc, image, category, url, linkText }: Pro
             { categories.filter((c) => c.title === category).map((cat, i) => {
                 const Icon = Icons[cat.icon as keyof typeof Icons];
                 return (
-                  <span key={i} className="flex items-center gap-2">
-                    <Icon className="h-4 w-4 stroke-sky-400 text-sky-400" /> { cat.title }
-                  </span>
+                  <TooltipProvider key={i}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="flex items-center gap-2 cursor-help">
+                          <Icon className="h-4 w-4 stroke-sky-400 text-sky-400" /> { cat.title }
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{ cat.desc }</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )
               }
             ) }

components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }