Revert "status pages, flashcards" (#36)

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@fvilers/disable-react-devtools": "^1.3.0",
     "@hookform/resolvers": "^3.3.4",
-    "@tanstack/query-core": "^5.17.10",
     "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.6.5",
@@ -25,9 +24,7 @@
     "react-hook-form": "^7.49.2",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.21.1",
-    "react-spinners": "^0.13.8",
     "tailwind-merge": "^2.2.0",
-    "wonka": "^6.3.4",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -49,4 +46,4 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.11"
   }
-}
+}

src/components/App.tsx

@@ -11,11 +11,7 @@ import Verified from "./pages/Auth/Verified";
 import Home from "./pages/Home/Home";
 import PersistLogin from "./router/PersistLogin";
 import Flashcards from "./pages/Quiz/Flashcards/Flashcards";
-import NotFound from "./pages/Status/NotFound/NotFound";
-import QuizLayout from "./layout/QuizLayout";
-import Error from "./pages/Status/Error";
-import Loading from "./pages/Status/Loading";
-import Unauthorized from "./pages/Status/Unauthorized";
+import NotFound from "./pages/Status/NotFound";
 
 export default function App() {
   return (
@@ -36,21 +32,10 @@ export default function App() {
 
           <Route path="/:userName/:quizSlug" element={<Quiz />} />
 
-          {/* <Route path="*" element={<NotFound />} /> */}
-          <Route path="/error" element={<Error />} />
-          <Route path="/notfound" element={<NotFound />} />
-          <Route path="/loading" element={<Loading />} />
-          <Route path="/unauthorized" element={<Unauthorized />} />
-        </Route>
-
-        <Route path="/" element={<QuizLayout />}>
-          <Route path="/flashcards" element={<Flashcards />} />
-          <Route
-            path="/:userName/:quizSlug/flashcards"
-            element={<Flashcards />}
-          />
-          <Route path="/test" element={<Test />} />
+          <Route path="*" element={<NotFound />} />
         </Route>
+        <Route path="/flashcards" element={<Flashcards />} />
+        <Route path="/test" element={<Test />} />
       </Route>
     </Routes>
   );

src/components/layout/Header/QuizHeader.tsx

@@ -1,33 +1,30 @@
 import MainLogo from "@/assets/images/light.png";
 import { X } from "lucide-react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import DarkModeButton from "./DarkModeButton";
 import Logo from "./Logo";
-import { useAtomValue } from "jotai";
-import { quizNameAtom } from "@/atoms/quiz";
 
-export default function QuizHeader() {
-  const navigate = useNavigate();
-  const name = useAtomValue(quizNameAtom);
+interface QuizHeaderProps {
+  name: string;
+}
 
+export default function QuizHeader({ name }: QuizHeaderProps) {
   return (
     <nav className="bg-primary text-white top-0 w-full z-10 font-primary">
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 container mx-auto px-4 sm:px-6 py-2 sm:py-3 lg:py-4 xl:px-8 2xl:px-12 z-50">
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 container mx-auto px-4 sm:px-6 py-2 sm:py-3 lg:py-4 xl:px-8 2xl:px-12">
         <div className="col-start-1 flex items-center">
           <Logo logo={MainLogo} />
         </div>
         <div className="hidden sm:flex sm:items-center sm:justify-center sm:col-start-2">
-          <p className="textHover hidden sm:block text-lg font-semibold md:text-xl xl:text-2xl z-50">
-            <button onClick={() => navigate(-1)}>{name}</button>
+          <p className="textHover hidden sm:block text-lg font-semibold md:text-xl xl:text-2xl">
+            {name}
           </p>
         </div>
 
         <div className="col-start-2 sm:col-start-3 flex items-center ml-auto">
           <DarkModeButton />
           <Link to="/quiz" className="flex pl-3">
-            <button onClick={() => navigate(-1)}>
-              <X className="w-10 h-10 z-50" />
-            </button>
+            <X className="w-10 h-10" />
           </Link>
         </div>
       </div>

src/components/layout/Other/FillHeight.tsx

@@ -0,0 +1,5 @@
+export default function FillHeight() {
+  return (
+    <div className="absolute top-0 w-full h-full bg-primary -z-[100]"></div>
+  );
+}

src/components/layout/QuizLayout.tsx

@@ -1,14 +1,12 @@
 import { Toaster } from "react-hot-toast";
 import { Outlet } from "react-router-dom";
 import QuizHeader from "./Header/QuizHeader";
-// import Background from "./Background/Background";
 
 export default function QuizLayout() {
   return (
     <>
       <Toaster />
-      <QuizHeader />
-      {/* <Background /> */}
+      <QuizHeader name="Test" />
       <Outlet />
     </>
   );