refining timer component

src/assets/css/components/Timer.scss

@@ -0,0 +1,13 @@
+.timer {
+	@apply absolute top-0 left-1/2 z-10  py-2 px-8 flex items-center gap-x-2;
+	transform: translate(-50%, -2px);
+	.bg {
+		@apply absolute block top-0 left-1/2 w-full h-full bg-transparent bg-white;
+		z-index: -1;
+		translate: -50%;
+		transform: perspective(150px) rotateY(7deg);
+	}
+	.clock {
+		@apply w-8;
+	}
+}

src/components/game/Timer.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+import clock from "../../assets/img/clock.svg";
+import { useGame } from "../../hooks/useGame";
+import {formatCurrentTime} from "../../utils/gameFunctions";
+
+export default function Timer({ currentTime, setCurrentTime }) {
+	const { hasCheckedTutorial, isTimeRuning } = useGame();
+	console.log("currentTime", currentTime);
+	useEffect(() => {
+		if (!hasCheckedTutorial || !isTimeRuning) return;
+		let intervalId;
+		intervalId = setInterval(() => setCurrentTime(currentTime + 100), 1000);
+		setCurrentTime(currentTime);
+
+		return () => clearInterval(intervalId);
+	}, [hasCheckedTutorial, currentTime, isTimeRuning]);
+
+	const gameTime = formatCurrentTime(currentTime);
+
+	return (
+		<div className='timer'>
+			<div className='bg'></div>
+			<img className='clock' src={clock} alt='' />
+			<h2>{gameTime}</h2>
+		</div>
+	);
+}