add popover

package.json

@@ -13,6 +13,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.4",
     "@types/mdx": "^2.0.13",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "next": "14.2.24",
     "react": "^18",

src/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
       <div className="mx-auto w-[480px]">
         <header className="text-center mb-8">
           <h1 className="font-bold text-3xl leading-normal">
-            Nomi Nonsense Workspace
+            Nonszy Work<span className="text-[#F48120]">space</span>
           </h1>
         </header>
         <noscript>

src/components/floating-label.tsx

@@ -0,0 +1,17 @@
+import { PopoverText } from "./popover-text";
+
+export const FloatingLabel = ({
+  placeholder,
+  children
+}: {
+  placeholder: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div>
+      <PopoverText text={placeholder}>
+        {children}
+      </PopoverText>
+    </div>
+  );
+};

src/components/home-text.mdx

@@ -1,5 +1,6 @@
 import Image from "next/image"
 import Link from "next/link";
+import { FloatingLabel } from "./floating-label";
 
 Welcome!
 
@@ -57,12 +58,13 @@ We love what we do because it helps those in need, whether they realize it or no
 
 Let's continue pushing ahead towards a brighter tomorrow where we can use technology for the greater good, including the ones who are on your side. We love you as much as we do for who you are, and we're just here to bring about positive change for all.
 
+<FloatingLabel placeholder="Pat pat pat">
     <Image
         className="mb-12 mx-auto"
         alt="Pat coral"
-    title="Pat pat pat pat pat"
         src="https://media.tenor.com/jZkB6qUnOQUAAAAi/coral-glasses-dream-bbq-ena.gif"
         width={350}
         height={350}
         unoptimized
     />
+</FloatingLabel>

src/components/landing-image.tsx

@@ -1,13 +1,15 @@
 import Image from "next/image"
+import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
+  <FloatingLabel placeholder="Coral Glasses from ENA Dream BBQ">
     <Image
       className="mb-8 mx-auto"
       alt="Coral <3"
-    title="Coral Glasses from ENA Dream BBQ"
       src="https://media1.tenor.com/m/RIP2rxKM_FgAAAAC/ena-ena-dream-bbq.gif"
       width={280}
       height={280}
       unoptimized
     />
+  </FloatingLabel>
 )

src/components/popover-text.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+interface CursorPopoverProps {
+	text: string;
+}
+
+interface PoopoverTextProps extends CursorPopoverProps {
+  children: React.ReactNode
+}
+
+export const CursorPopover: React.FC<CursorPopoverProps> = ({ text }) => {
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+
+	useEffect(() => {
+		const handleMouseMove = (e: MouseEvent) => {
+      setTimeout(() => setPosition({ x: e.clientX, y: e.clientY }), 50)
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	}, []);
+
+		return (
+			<div
+				className={clsx((position.x > 0 && position.y > 0) ? "fixed" : "hidden", "pointer-events-none bg-neutral-900 px-3 py-1.5 text-sm z-[9999]")}
+				style={{ left: position.x + 12, top: position.y + 12 }}
+			>
+				{text}
+			</div>
+		);
+};
+
+export const PopoverText: React.FC<PoopoverTextProps> = ({ text, children }) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {hovered && <CursorPopover text={text} />}
+      {children}
+    </div>
+  )
+}

src/components/sosmed.tsx

@@ -2,6 +2,7 @@
 
 import { Icon } from "@iconify/react";
 import Link from "next/link";
+import { FloatingLabel } from "./floating-label";
 
 const sosmeds =  [
   {
@@ -37,15 +38,16 @@ export const Sosmed = () => {
   return (
     <div className="flex justify-center gap-4 mb-10">
       {sosmeds.map((sosmed) => (
+        <FloatingLabel placeholder={sosmed.name}>
           <Link
             className="grid items-center justify-center border md:border-2 border-primary w-[48px] xs:w-[54px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1 hover:scale-105"
             href={sosmed.url}
             target="_blank"
-          title={sosmed.name}
             key={sosmed.name}
           >
             <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
           </Link>
+        </FloatingLabel>
       ))}
     </div>
   )

yarn.lock

@@ -784,6 +784,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 collapse-white-space@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"