fix: performance issues for styled-componnt CSS animations

2 files changed, 22 insertions, 20 deletions

diff --git a/src/app/create/page.styles.ts b/src/app/create/page.styles.ts
index 341ba08..b54e095 100644
--- a/src/app/create/page.styles.ts
+++ b/src/app/create/page.styles.ts
@@ -85,6 +85,19 @@ export const GenerateButton = styled.button`
   }
 `;
 
+export const ModeButton = styled.button<{ $active: boolean }>`
+  height: 42px;
+  padding: 0 24px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  background-color: ${(p) => (p.$active ? "#1a1a1a" : "#e5e5e5")};
+  color: ${(p) => (p.$active ? "#fff" : "#1a1a1a")};
+  transition: background-color 0.15s;
+`;
+
 export const OutputSection = styled.div`
   margin-top: 32px;
   display: flex;
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 />