Merge pull request #89 from evgongora/fix/errors

feat: fix errors and add button for results page
MindVault-Inc · Jan 23, 2025 · 08b01a3 · 08b01a3
2 parents b612b1b + 5011606
commit 08b01a3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 23 deletions.
diff --git a/frontend/src/app/tests/page.tsx b/frontend/src/app/tests/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import SearchBar from "@/components/ui/SearchBar"
-import { TestCard } from "@/components/TestCard"
+import { TestCard } from "@/components/ui/TestCard"
 
 export default function TestsPage() {
   const handleSearch = (query: string) => {
@@ -11,6 +11,7 @@ export default function TestsPage() {
 
   // Example test data - this would typically come from your API
   const testData = {
+    title: "Personality Test",
     totalQuestions: 20,
     answeredQuestions: 8,
     achievements: [
@@ -20,27 +21,34 @@ export default function TestsPage() {
   }
 
   return (
-    <div className="flex flex-col items-center p-4 md:p-6 mt-16 md:mt-14">
-      <div className="w-full max-w-7xl px-4">
-        <div className="mb-6 md:mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold font-spaceGrotesk mb-4">
+    <div className="min-h-screen bg-neutral-bg">
+      <div className="bg-brand-tertiary p-10 pt-16 pb-12 rounded-b-[4rem] shadow-lg border-b border-brand-tertiary/20 relative overflow-hidden mb-8">
+        <div className="relative z-10 text-center max-w-md mx-auto">
+          <h1 className="text-4xl font-bold text-slate-100 mb-4 tracking-tight">
             Available Tests
           </h1>
+          <p className="text-slate-200 text-lg mb-4 max-w-sm mx-auto font-medium">
+            Explore our collection of tests to understand yourself better
+          </p>
           <SearchBar 
             onSearch={handleSearch} 
             placeholder="Search for tests..."
             className="mb-6"
           />
         </div>
+      </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <TestCard
-            totalQuestions={testData.totalQuestions}
-            answeredQuestions={testData.answeredQuestions}
-            achievements={testData.achievements}
-            onCardClick={() => {/* Handle click */}}
-          />
-          {/* Add more TestCards as needed */}
+      <div className="flex flex-col items-center md:p-6">
+        <div className="w-full max-w-7xl px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <TestCard
+              title={testData.title}
+              totalQuestions={testData.totalQuestions}
+              answeredQuestions={testData.answeredQuestions}
+              achievements={testData.achievements}
+              onCardClick={() => {/* Handle click */}}
+            />
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/BottomNav.tsx b/frontend/src/components/BottomNav.tsx
@@ -1,13 +1,14 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Home, BookCheck, Trophy, Settings } from 'lucide-react'
+import { Home, BookCheck, Trophy, Settings, Lightbulb } from 'lucide-react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 const navItems = [
   { icon: Home, href: '/' },
   { icon: BookCheck, href: '/tests' },
+  { icon: Lightbulb, href: '/results' },
   { icon: Trophy, href: '/achievements' },
   { icon: Settings, href: '/settings' },
 ]

diff --git a/frontend/src/components/ui/SearchBar.tsx b/frontend/src/components/ui/SearchBar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { useState, ChangeEvent, KeyboardEvent, InputHTMLAttributes, forwardRef } from 'react'
-import { FaSearch, FaTimes } from 'react-icons/fa'
+import { useState, ChangeEvent, InputHTMLAttributes, forwardRef } from 'react'
+import { Search, X } from 'lucide-react'
 
 // Utility function for class names
 const cn = (...classes: (string | boolean | undefined)[]) => classes.filter(Boolean).join(' ')
@@ -38,15 +38,15 @@ export default function SearchBar({
   const [searchQuery, setSearchQuery] = useState('')
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
+    setSearchQuery(e.target.value)
   }
 
   const handleSearch = () => {
-    onSearch(searchQuery);
+    onSearch(searchQuery)
   }
 
   const handleClear = () => {
-    setSearchQuery('');
+    setSearchQuery('')
   }
 
   return (
@@ -63,13 +63,13 @@ export default function SearchBar({
           onClick={handleClear} 
           className="h-8 px-2 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center hover:bg-gray-300 transition-colors duration-200"
         >
-          <FaTimes />
+          <X className="w-4 h-4" />
         </button>
         <button 
           onClick={handleSearch} 
           className="h-8 px-4 bg-teal-600 text-white rounded-full flex items-center justify-center shadow-md hover:shadow-lg transition-shadow duration-200"
         >
-          <FaSearch />
+          <Search className="w-4 h-4" />
         </button>
       </div>
     </div>

diff --git a/frontend/src/components/ui/TestCard.tsx b/frontend/src/components/ui/TestCard.tsx
@@ -81,5 +81,4 @@ export function TestCard({
       </div>
     </div>
   )
-}
-
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,5 +81,4 @@ export function TestCard({ @@
           </div>
         </div>
       )
-    }
+    }