refactor: convert insertRickLabel to use a React component for improved structure and state management

source/src/index.ts

@@ -1,60 +1,27 @@
-let clickCount = 0
+import { h, render, Component } from 'nano-jsx'
 
-export function insertRickLabel(target: HTMLElement | string = document.body): void {
-  const label = document.createElement('div')
-  label.textContent = `Rickroll Me (0)`
-  Object.assign(label.style, {
-    background: 'white',
-    color: 'black',
-    fontFamily: 'sans-serif',
-    padding: '8px 12px',
-    borderRadius: '6px',
-    cursor: 'pointer',
-    boxShadow: '0 0 5px rgba(0,0,0,0.1)',
-    width: 'fit-content',
-    userSelect: 'none',
-    transition: 'all 0.3s ease'
-  })
+class RickLabel extends Component {
+  count = 0
 
-  label.onclick = () => {
-    clickCount++
-    label.textContent = `Rickroll Me (${clickCount})`
-
-    const url =
-      clickCount >= 69
-        ? 'https://youtu.be/soKTQx0p7_Q?list=RDsoKTQx0p7_Q'
-        : 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-
-    if (clickCount === 69) {
-      // Activate rainbow effect via CSS animation
-      label.style.animation = 'rainbowBackground 3s linear infinite'
-      label.style.color = 'white'
-    }
-
-    window.open(url, '_blank')
+  handleClick = () => {
+    this.count++
+    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+    this.update()
   }
 
-  if (typeof target === 'string') {
-    document.querySelector(target)?.appendChild(label)
-  } else {
-    target.appendChild(label)
-  }
-
-  // Inject rainbow animation into page if not already there
-  if (!document.getElementById('rainbow-style')) {
-    const style = document.createElement('style')
-    style.id = 'rainbow-style'
-    style.textContent = `
-      @keyframes rainbowBackground {
-        0% { background: red; }
-        16% { background: orange; }
-        32% { background: yellow; }
-        48% { background: green; }
-        64% { background: blue; }
-        80% { background: indigo; }
-        100% { background: violet; }
-      }
-    `
-    document.head.appendChild(style)
+  render() {
+    return (
+      <div
+        style="background:white; padding:8px 12px; border-radius:6px; cursor:pointer; font-family:sans-serif;"
+        onclick={this.handleClick}
+      >
+        Rickroll Me ({this.count})
+      </div>
+    )
   }
 }
+
+export function insertRickLabel(target: HTMLElement | string = document.body) {
+  const container = typeof target === 'string' ? document.querySelector(target) : target
+  if (container) render(<RickLabel />, container)
+}