From 4a3d5f9cf62e2d33411ebe2866bc60eabe802250 Mon Sep 17 00:00:00 2001
From: AshGw <AshrefGw@proton.me>
Date: Sun, 11 Feb 2024 13:10:15 +0100
Subject: [PATCH] feat: make `AnimatedCopyButton` for code blocks

---
 make.ts                                       |  16 ++
 src/app/(pages)/blog/[post]/back-top.tsx      |   2 +-
 src/app/(pages)/y/page.tsx                    | 136 ++----------
 src/app/(pages)/y/styles.mod.css              | 198 ------------------
 .../components/reusables/code/copy-code.tsx   |  25 ++-
 5 files changed, 60 insertions(+), 317 deletions(-)
 create mode 100644 make.ts
 delete mode 100644 src/app/(pages)/y/styles.mod.css

diff --git a/make.ts b/make.ts
new file mode 100644
index 00000000..974bb8c6
--- /dev/null
+++ b/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);
+}
diff --git a/src/app/(pages)/blog/[post]/back-top.tsx b/src/app/(pages)/blog/[post]/back-top.tsx
index ca8da7c4..d0486fa3 100644
--- a/src/app/(pages)/blog/[post]/back-top.tsx
+++ b/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">
diff --git a/src/app/(pages)/y/page.tsx b/src/app/(pages)/y/page.tsx
index 60ac5406..9b73c43b 100644
--- a/src/app/(pages)/y/page.tsx
+++ b/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;
+}
diff --git a/src/app/(pages)/y/styles.mod.css b/src/app/(pages)/y/styles.mod.css
deleted file mode 100644
index 8864c531..00000000
--- a/src/app/(pages)/y/styles.mod.css
+++ /dev/null
@@ -1,198 +0,0 @@
-body {
-  line-height: 1.6;
-  color: #fff;
-  background: #000;
-  font-size: 18px;
-  font-weight: 400;
-  font-family: '-apple-system', 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue',
-    sans-serif !important;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &.stop {
-    overflow: hidden;
-  }
-}
-
-#page {
-  position: relative;
-  transition: 0.3s all ease-in-out;
-
-  &.menuopen {
-    opacity: 0.6;
-    filter: blur(20px);
-    transform: scale(1.2);
-  }
-}
-
-section {
-  display: flex;
-  min-height: 100vh;
-  padding: 50px;
-  justify-content: center;
-  align-items: center;
-  background: #222;
-  color: #fff;
-  position: relative;
-
-  &:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: #000;
-    opacity: 0.5;
-    height: 100%;
-    width: 100%;
-  }
-
-  h1 {
-    font-size: 120px;
-    margin: 0;
-    z-index: 2;
-    position: relative;
-  }
-}
-
-header {
-  z-index: 99999;
-  position: relative;
-
-  #logo {
-    position: fixed;
-    top: 30px;
-    left: 0;
-    right: 0;
-    width: 100px;
-    height: auto;
-    margin: 0 auto;
-    opacity: 1;
-    transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
-  }
-
-  nav {
-    display: flex;
-    height: 100px;
-    justify-content: center;
-    align-items: center;
-    padding: 0 20px;
-    position: fixed;
-    left: 0;
-    right: 0;
-    width: 500px;
-    margin: 0 auto;
-    top: 120px;
-    background-color: rgba(255, 255, 255, 0.05);
-    border-radius: 200px;
-    z-index: 9;
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
-
-    a {
-      color: #fff;
-      text-decoration: none;
-      font-weight: 700;
-      display: block;
-      padding: 10px 20px;
-      line-height: 1;
-      font-size: 15px;
-      letter-spacing: 2px;
-      text-transform: lowercase;
-      transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
-    }
-
-    button {
-      -webkit-appearance: none;
-      background: rgba(0, 0, 0, 0.3);
-      backdrop-filter: blur(5px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      position: absolute;
-      z-index: 99;
-      left: 0;
-      margin: auto;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 60px;
-      height: 60px;
-      border-radius: 100%;
-      outline: 0;
-      border: 0;
-      cursor: pointer;
-      transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
-      transform: scale(0);
-
-      span {
-        width: 40%;
-        background: #fff;
-        height: 2px;
-        display: block;
-        margin: 5px auto;
-        transform: scalex(0);
-        transition:
-          0.6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s,
-          0.3s margin ease-in 0s;
-      }
-
-      &:hover {
-        border-color: rgba(255, 255, 255, 0.5);
-
-        span {
-          margin: 10px auto;
-        }
-      }
-    }
-  }
-}
-
-header.sticky {
-  #logo {
-    top: 0;
-    transform: scale(0.8);
-    opacity: 0;
-    transition-delay: 0.2s;
-  }
-  nav {
-    top: 20px;
-    padding: 0;
-    width: 90px;
-    height: 90px;
-    transition-delay: 0.2s;
-
-    button {
-      transform: scale(1);
-      transition-delay: 0.2s;
-
-      span {
-        transform: scalex(1);
-        transition:
-          0.6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s,
-          0.3s margin ease-in 0s;
-      }
-    }
-
-    a {
-      padding: 0;
-      opacity: 0;
-      letter-spacing: 0px;
-      transform: scale(0.3);
-      transition-delay: 0.2s;
-    }
-  }
-}
-
-#fixedlink {
-  position: fixed;
-  bottom: 0;
-  z-index: 9999;
-  right: 0;
-  left: 0;
-  text-align: center;
-  text-decoration: none;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  padding: 20px;
-}
diff --git a/src/app/components/reusables/code/copy-code.tsx b/src/app/components/reusables/code/copy-code.tsx
index 3402028a..389a0f50 100644
--- a/src/app/components/reusables/code/copy-code.tsx
+++ b/src/app/components/reusables/code/copy-code.tsx
@@ -1,4 +1,6 @@
 'use client';
+import { Check } from 'lucide-react';
+import React, { useState } from 'react';
 import { FC } from 'react';
 import { Copy } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -21,9 +23,30 @@ const CopyButton: FC<CopyButtonProps> = ({ code, className }) => {
         copyToClipboard(code);
       }}
     >
-      <Copy size={'24px'} strokeWidth={'2px'} />
+      <AnimatedCopyButton />
     </button>
   );
 };
 
 export default CopyButton;
+
+const AnimatedCopyButton: React.FC = () => {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = () => {
+    setCopied(true);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 300);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`average-transition ${copied ? 'scale-0' : 'scale-100'}`}
+    >
+      {copied ? <Check /> : <Copy />}
+    </button>
+  );
+};