chore: add a race page

Author: webdevcody

src/app/race/page.tsx

@@ -0,0 +1,11 @@
+import TypingCode from "@/components/typing/typingCode";
+
+export default async function Race() {
+  return (
+    <>
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        <TypingCode />
+      </main>
+    </>
+  );
+}

src/components/header.tsx

@@ -10,7 +10,7 @@ const Header = () => {
   const [state, setState] = useState(false);
 
   const navigation = [
-    { title: "Race", path: "/" },
+    { title: "Race", path: "/race" },
     { title: "Leaderboard", path: "/" },
     { title: "About", path: "/" },
   ];

src/components/typing/displayedCode.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 interface displayCodeProps {
   code: string;
@@ -8,16 +8,16 @@ interface displayCodeProps {
 export default function DisplayedCode({ code, errors }: displayCodeProps) {
   return (
     <p className="text-gray-600 mb-4">
-    {code.split("").map((char, index) => (
-      <span
-        key={index}
-        className={`${
-          errors.includes(index) ? "text-red-500" : "opacity-100"
-        }`}
-      >
-        {char}
-      </span>
-    ))}
-  </p>
-  )
+      {code.split("").map((char, index) => (
+        <span
+          key={index}
+          className={`${
+            errors.includes(index) ? "text-red-500" : "opacity-100"
+          }`}
+        >
+          {char}
+        </span>
+      ))}
+    </p>
+  );
 }

src/components/typing/typingCode.tsx

@@ -1,8 +1,10 @@
 "use client";
+
 import { useState, useEffect } from "react";
+
 import DisplayedCode from "./displayedCode";
 
-const code = 'printf("hello world")';
+const code = `printf("hello world")`;
 
 export default function TypingCode() {
   const [input, setInput] = useState("");