add: TimerChallenge File

src/App.jsx

@@ -1,12 +1,18 @@
-import Player from './components/Player.jsx';
+import Player from "./components/Player.jsx";
+import TimerChallenge from "./components/TimerChallenge.jsx";
 
 function App() {
-  return (
-    <>
-      <Player />
-      <div id="challenges"></div>
-    </>
-  );
+	return (
+		<>
+			<Player />
+			<div id="challenges">
+				<TimerChallenge title="easy" targetTime={1} />
+				<TimerChallenge title="not easy" targetTime={5} />
+				<TimerChallenge title="getting tough" targetTime={10} />{" "}
+				<TimerChallenge title="pros only" targetTime={15} />
+			</div>
+		</>
+	);
 }
 
 export default App;

src/components/TimerChallenge.jsx

@@ -0,0 +1,18 @@
+export default function TimerChallenge({ title, targetTime }) {
+	function handleStart() {
+		setTimeout(() => {}, targetTime * 1000);
+	}
+	return (
+		<section className="challenge">
+			<h2>{title}</h2>
+			<p className="challenge-time">
+				{targetTime} second{targetTime > 1 ? "s" : ""}
+			</p>
+			<p>
+				{" "}
+				<button>Start Challenge</button>
+			</p>
+			<p className="active">Time is running... / Time inactive</p>
+		</section>
+	);
+}