diff options
| author | Pinapelz <yukais@pinapelz.com> | 2026-04-16 17:02:53 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2026-04-16 17:02:53 -0700 |
| commit | d5fe045b361a3735509bfa2549efa0bd185bc7de (patch) | |
| tree | ffcf1d82918a9e8b73f679a71cf3b41d31022bae /src/app/create/page.tsx | |
| parent | d14bf345284afeff8a8baab27c639cd577ba2a5e (diff) | |
fix: performance issues for styled-componnt CSS animations
Diffstat (limited to 'src/app/create/page.tsx')
| -rw-r--r-- | src/app/create/page.tsx | 29 |
1 files changed, 9 insertions, 20 deletions
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 /> |