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.
 
-<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 placeholder="Pat pat pat">
+    <Image
+        className="mb-12 mx-auto"
+        alt="Pat coral"
+        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 = () => (
-  <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 placeholder="Coral Glasses from ENA Dream BBQ">
+    <Image
+      className="mb-8 mx-auto"
+      alt="Coral <3"
+      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) => (
-        <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 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"
+            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"