add exam serch in home page

Author: cbvora

app/page.tsx

@@ -1,32 +1,50 @@
+"use client";
+
+import { useState } from "react";
 import type { NextPage } from "next";
 import NameLink from "@azure-fundamentals/components/NameLink";
 import exams from "@azure-fundamentals/lib/exams.json";
 
 const Home: NextPage = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const filteredExams = exams.filter((exam) =>
+    exam.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <div className="mx-auto mb-6 w-full lg:w-[70vw] 2xl:w-[45%] text-center">
-      <h2 className="text-white text-5xl text-leading font-bold uppercase md:mt-14">
+      <h2 className="text-white text-5xl font-bold uppercase md:mt-14">
         Welcome!
       </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
-        Select an exam from the list bellow.
+        Select an exam from the list below.
       </p>
+      <input
+        type="text"
+        value={searchTerm}
+        onChange={handleSearchChange}
+        placeholder="Search exams"
+        className="mb-5 px-4 py-2 border border-gray-300 rounded-md w-3/4 lg:w-1/2"
+      />
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 mx-5 lg:mx-0">
-        {exams.map((exam) => {
-          return (
-            <NameLink
-              key={exam.name}
-              href={{
-                pathname: "/modes",
-                query: { url: exam.url, name: exam.name },
-              }}
-              heading={exam.name}
-              paragraph={exam.subtitle}
-              wrapperClassNames="hover:bg-[#C7D2E2]"
-              headingClassNames="group-hover:from-[#fff] group-hover:to-[#fff]"
-            />
-          );
-        })}
+        {filteredExams.map((exam) => (
+          <NameLink
+            key={exam.name}
+            href={{
+              pathname: "/modes",
+              query: { url: exam.url, name: exam.name },
+            }}
+            heading={exam.name}
+            paragraph={exam.subtitle}
+            wrapperClassNames="hover:bg-[#C7D2E2]"
+            headingClassNames="group-hover:from-[#fff] group-hover:to-[#fff]"
+          />
+        ))}
       </div>
     </div>
   );

components/QuizForm.tsx

@@ -43,7 +43,7 @@ const QuizForm: FC<Props> = ({
   } | null>(null);
 
   useEffect(() => {
-    const handleEsc = (event) => {
+    const handleEsc = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setSelectedImage(null);
       }
@@ -54,7 +54,9 @@ const QuizForm: FC<Props> = ({
     };
   }, [setSelectedImage]);
 
-  const handleClickOutside = (event) => {
+  const handleClickOutside = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
     if (event.target === event.currentTarget) {
       setSelectedImage(null);
     }
@@ -309,7 +311,7 @@ const QuizForm: FC<Props> = ({
                 isOptionChecked(option.text) ||
                 isOptionCheckedWithoutReveal(option.text)
               }
-              handleChange={(e) => {
+              handleChange={(e: any) => {
                 handleRadioCheckboxClick(e, noOfAnswers > 1);
               }}
             />