From d5fe045b361a3735509bfa2549efa0bd185bc7de Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Thu, 16 Apr 2026 17:02:53 -0700
Subject: fix: performance issues for styled-componnt CSS animations

---
 src/app/create/page.tsx | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

(limited to 'src/app/create/page.tsx')

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 016c930..d1537d4 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { MdLibraryMusic } from "react-icons/md";
 import { FaCopy, FaCheck, FaExternalLinkAlt } from "react-icons/fa";
 import { Root, Navbar, Logo, LogoIcon, NavLink } from "../styles/shared";
@@ -14,6 +14,7 @@ import {
   Divider,
   Row,
   GenerateButton,
+  ModeButton,
   OutputSection,
   OutputLabel,
   CodeBox,
@@ -108,13 +109,7 @@ export default function CreatePage() {
   };
 
   const playerPath = mode === "typing" ? "/typing" : "/player";
-  const shareUrl = useMemo(
-    () =>
-      code
-        ? `${typeof window !== "undefined" ? window.location.origin : ""}${playerPath}?code=${code}`
-        : "",
-    [code, playerPath]
-  );
+  const shareUrl = code ? `${playerPath}?code=${code}` : "";
 
   return (
     <Root>
@@ -136,32 +131,26 @@ export default function CreatePage() {
 
         <Form>
           <Row>
-            <GenerateButton
+            <ModeButton
+              $active={mode === "karaoke"}
               onClick={() => {
                 setMode("karaoke");
                 setCode(null);
                 resetCopyStates();
               }}
-              style={{
-                backgroundColor: mode === "karaoke" ? "#1a1a1a" : "#e5e5e5",
-                color: mode === "karaoke" ? "#fff" : "#1a1a1a",
-              }}
             >
               MoekyunKaraoke
-            </GenerateButton>
-            <GenerateButton
+            </ModeButton>
+            <ModeButton
+              $active={mode === "typing"}
               onClick={() => {
                 setMode("typing");
                 setCode(null);
                 resetCopyStates();
               }}
-              style={{
-                backgroundColor: mode === "typing" ? "#1a1a1a" : "#e5e5e5",
-                color: mode === "typing" ? "#fff" : "#1a1a1a",
-              }}
             >
               LRC-Type
-            </GenerateButton>
+            </ModeButton>
           </Row>
 
           <Divider />
-- 
cgit v1.2.3