mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

playpause

Browse Source
This commit is contained in:
Mark Hoekveen
2025-06-22 23:56:30 +02:00
parent dba9b58a6a
commit e7ca11d1bc
2 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/layout.tsx
+15 -1
View File
@@ -1,13 +1,27 @@
"use client";
import "./style.css"; import "./style.css";
import { useState } from "react";
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const [isAnimate, setIsAnimate] = useState(false);
const toggleAnimation = () => {
setIsAnimate(!isAnimate);
};
return ( return (
<html lang="en"> <html lang="en">
<body className="bg-game-show animate h-screen">{children}</body> <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
{children}
<button
className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
onClick={toggleAnimation}
></button>
</body>
</html> </html>
); );
} }
frontend/src/app/style.css
+7
View File
@@ -27,3 +27,10 @@
--angle: 30deg; --angle: 30deg;
} }
} }
.play:before {
content: "▶️";
}
.pause:before {
content: "⏸";
}