From a4ecdb822c7f663b14c457d9a773eb1e0615f78c Mon Sep 17 00:00:00 2001
From: nomi-nonsz <norman25.na@gmail.com>
Date: Mon, 1 Sep 2025 11:51:16 +0700
Subject: [PATCH] add popover

---
 package.json                      |  1 +
 src/app/page.tsx                  |  2 +-
 src/components/floating-label.tsx | 17 +++++++++++
 src/components/home-text.mdx      | 20 +++++++------
 src/components/landing-image.tsx  | 20 +++++++------
 src/components/popover-text.tsx   | 48 +++++++++++++++++++++++++++++++
 src/components/sosmed.tsx         | 20 +++++++------
 yarn.lock                         |  5 ++++
 8 files changed, 105 insertions(+), 28 deletions(-)
 create mode 100644 src/components/floating-label.tsx
 create mode 100644 src/components/popover-text.tsx

diff --git a/package.json b/package.json
index b23208e..ac6e273 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3fa3b7e..9de5913 100644
--- a/src/app/page.tsx
+++ b/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>
diff --git a/src/components/floating-label.tsx b/src/components/floating-label.tsx
new file mode 100644
index 0000000..9a3203d
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/src/components/home-text.mdx b/src/components/home-text.mdx
index 11312ce..46d9784 100644
--- a/src/components/home-text.mdx
+++ b/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
-/>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/components/landing-image.tsx b/src/components/landing-image.tsx
index c3b41ce..8169e0c 100644
--- a/src/components/landing-image.tsx
+++ b/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>
 )
\ No newline at end of file
diff --git a/src/components/popover-text.tsx b/src/components/popover-text.tsx
new file mode 100644
index 0000000..4d49f01
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/src/components/sosmed.tsx b/src/components/sosmed.tsx
index 6c1f70e..f7f2655 100644
--- a/src/components/sosmed.tsx
+++ b/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>
   )
diff --git a/yarn.lock b/yarn.lock
index 8d58a32..30232d6 100644
--- a/yarn.lock
+++ b/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"