feat: make AnimatedCopyButton for code blocks

make.ts

@@ -0,0 +1,16 @@
+const iterableObject = {
+  data: [1, 2, 3],
+  [Symbol.iterator]: function () {
+    let index = 0;
+    return {
+      next: () => ({
+        value: this.data[index++],
+        done: index > this.data.length,
+      }),
+    };
+  },
+};
+
+for (const item of iterableObject) {
+  console.log(item);
+}

src/app/(pages)/blog/[post]/back-top.tsx

@@ -13,7 +13,7 @@ export default function BackUpTop() {
         backUpTop && backUpTop.classList.remove('opacity-0');
       }
     });
-  }, [window.scrollY]);
+  }, []);
 
   return (
     <button className="fixed max-w-3 max-h-3 average-transition animate-bounce bottom-1 right-1 mx-12 md:px-18 lg:mx-24 xl:mx-[200px] my-12 hover:opacity-100">

src/app/(pages)/y/page.tsx

@@ -1,121 +1,23 @@
 'use client';
-import './styles.mod.scss';
-import React from 'react';
-import { useEffect } from 'react';
-const Component: React.FC = () => {
-  useEffect(() => {
-    var header = document.getElementById('myHeader');
-    var page = document.getElementById('page');
-    var openMenuButton = document.getElementById('openmenu');
-
-    window.addEventListener('scroll', function () {
-      page && page.classList.remove('menuopen');
-      if (window.scrollY >= 100) {
-        header && header.classList.add('sticky');
-      } else {
-        header && header.classList.remove('sticky');
-      }
-    });
-
-    // Event listener to remove the sticky class when the button is clicked
-    openMenuButton &&
-      openMenuButton.addEventListener('click', function () {
-        header && header.classList.remove('sticky');
-        page && page.classList.add('menuopen');
-      });
-
-    var links = document.querySelectorAll('a[href^="#"]');
-
-    links.forEach(function (link) {
-      link.addEventListener('click', function (event) {
-        // Prevent the default action
-        event.preventDefault();
-
-        // Get the target element
-        // @ts-ignore
-        var targetId = this.getAttribute('href');
-        var targetElement = document.querySelector(targetId);
-
-        // Smooth scroll to target
-        if (targetElement) {
-          targetElement.scrollIntoView({
-            behavior: 'smooth',
-          });
-        }
-      });
-    });
-  }, []);
-
+export default function Com() {
   return (
-    <div>
-      <header id="myHeader" className="">
-        <svg
-          id="logo"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 714.6 401.1"
-        >
-          <path
-            fill="#fff"
-            fillRule="evenodd"
-            d="M502.8 0h211.8l-23 39.7-138.5 240L483 401H342.7L413 279.6 251.4 0h140.3L483 158.1 538.6 62 502.8 0Zm-201 279.6L140.1 0H0l231.7 401 70-121.4Z"
-          />
-        </svg>
-        <nav>
-          <a href="#vision">Vision</a>
-          <a href="#knowledge">Knowledge</a>
-          <a href="#space">Space</a>
-          <a href="#future">Future</a>
-          <button id="openmenu">
-            <span></span>
-            <span></span>
-          </button>
-        </nav>
-      </header>
-      <div id="page" className="">
-        <section
-          id="vision"
-          style={{
-            backgroundImage: 'url(https://assets.codepen.io/214624/vision.jpg)',
-          }}
-        >
-          <h1>Vision.</h1>
-        </section>
-        <section
-          id="knowledge"
-          style={{
-            backgroundImage:
-              'url(https://assets.codepen.io/214624/knowledge.jpg)',
-          }}
-        >
-          <h1>Knowledge.</h1>
-        </section>
-        <section
-          id="space"
-          style={{
-            backgroundImage: 'url(https://assets.codepen.io/214624/space.jpg)',
-          }}
-        >
-          <h1>Space.</h1>
-        </section>
-        <section
-          id="future"
-          style={{
-            backgroundImage: 'url(https://assets.codepen.io/214624/future.jpg)',
-          }}
-        >
-          <h1>Future.</h1>
-        </section>
+    <>
+      {' '}
+      <div className=" flex justify-center items-center ">
+        <div className="relative average-transition hover:scale-80">
+          <div className="grid grid-cols-12 gap-2">
+            {Array.from({ length: 144 }, (_, index) => (
+              <div
+                key={index}
+                className=" bg-pink-500 flex items-center justify-center rounded-full"
+              >
+                <span className="h-1 w-1 bg-red-200 rounded-full animate-ping "></span>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
-      <a
-        id="fixedlink"
-        target="_blank"
-        rel="nofollow noopener"
-        href="https://wyld.studio/"
-      >
-        » See this solution in real usage
-      </a>
-    </div>
+      <div className="h-24 w-full"></div>
+    </>
   );
-};
-
-export default Component;
+}