|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { useEffect, useState, useRef, useMemo } from "react" |
| 4 | +import { Button } from "@/components/ui/button" |
| 5 | +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" |
| 6 | +import { exams, slots, years } from "@/components/select_options" |
| 7 | +import { Input } from "@/components/ui/input" |
| 8 | +import axios from "axios" |
| 9 | +import Fuse from "fuse.js" |
| 10 | +import { ArrowRight } from "lucide-react" |
| 11 | +import Image from "next/image" |
| 12 | + |
| 13 | +export default function PapersPage() { |
| 14 | + const [subjects, setSubjects] = useState<string[]>([]) |
| 15 | + const [searchText, setSearchText] = useState("") |
| 16 | + const [suggestions, setSuggestions] = useState<string[]>([]) |
| 17 | + const [selectedSubject, setSelectedSubject] = useState<string | null>(null) |
| 18 | + const [selectedExam, setSelectedExam] = useState<string | null>(null) |
| 19 | + const [selectedSlot, setSelectedSlot] = useState<string | null>(null) |
| 20 | + const [selectedYear, setSelectedYear] = useState<string | null>(null) |
| 21 | + const suggestionsRef = useRef<HTMLUListElement | null>(null) |
| 22 | + |
| 23 | + useEffect(() => { |
| 24 | + async function fetchSubjects() { |
| 25 | + try { |
| 26 | + const response = await axios.get(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/course-list`) |
| 27 | + const names = response.data.map((course: any) => course.name || course.courseName || course.title) |
| 28 | + setSubjects(names) |
| 29 | + } catch (err) { |
| 30 | + console.error("Error fetching subjects:", err) |
| 31 | + } |
| 32 | + } |
| 33 | + fetchSubjects() |
| 34 | + }, []) |
| 35 | + |
| 36 | + const fuse = useMemo(() => new Fuse(subjects, { includeScore: true, threshold: 0.3 }), [subjects]) |
| 37 | + |
| 38 | + useEffect(() => { |
| 39 | + if (!searchText.trim()) { |
| 40 | + setSuggestions([]) |
| 41 | + return |
| 42 | + } |
| 43 | + |
| 44 | + if (selectedSubject && searchText === selectedSubject) { |
| 45 | + setSuggestions([]) |
| 46 | + return |
| 47 | + } |
| 48 | + |
| 49 | + const results = fuse.search(searchText) |
| 50 | + setSuggestions(results.map(r => r.item).slice(0, 10)) |
| 51 | + }, [searchText, fuse, selectedSubject]) |
| 52 | + |
| 53 | + |
| 54 | + const handleSelectSubject = (subject: string) => { |
| 55 | + setSelectedSubject(subject) |
| 56 | + setSearchText(subject) |
| 57 | + setSuggestions([]) |
| 58 | + setSelectedExam(null) |
| 59 | + setSelectedSlot(null) |
| 60 | + setSelectedYear(null) |
| 61 | + } |
| 62 | + |
| 63 | + useEffect(() => { |
| 64 | + function handleClickOutside(event: MouseEvent) { |
| 65 | + if (suggestionsRef.current && !suggestionsRef.current.contains(event.target as Node)) { |
| 66 | + setSuggestions([]) |
| 67 | + } |
| 68 | + } |
| 69 | + document.addEventListener("mousedown", handleClickOutside) |
| 70 | + return () => document.removeEventListener("mousedown", handleClickOutside) |
| 71 | + }, []) |
| 72 | + |
| 73 | + const handleSubmit = () => { |
| 74 | + if (!selectedSubject || !selectedExam || !selectedSlot || !selectedYear) { |
| 75 | + alert("Please fill all fields before submitting") |
| 76 | + return |
| 77 | + } |
| 78 | + console.log({ subject: selectedSubject, exam: selectedExam, slot: selectedSlot, year: selectedYear }) |
| 79 | + } |
| 80 | + |
| 81 | + return ( |
| 82 | + <div className="min-h-screen bg-[#F3F5FF] dark:bg-[#070114] text-black dark:text-white px-6 py-12"> |
| 83 | + <main> |
| 84 | + <div className="max-w-4xl mx-auto text-center mb-16"> |
| 85 | + <h2 className="font-vipnabd text-3xl md:text-4xl font-extrabold mb-12">Specific Paper Request</h2> |
| 86 | + |
| 87 | + <div className="relative max-w-xl mx-auto mb-8 font-play"> |
| 88 | + <Input |
| 89 | + type="text" |
| 90 | + value={searchText} |
| 91 | + onChange={(e) => setSearchText(e.target.value)} |
| 92 | + placeholder="Search by subject..." |
| 93 | + className={`text-md rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-play tracking-wider |
| 94 | + text-black shadow-sm ring-0 placeholder:text-black focus:outline-none focus:ring-0 |
| 95 | + dark:bg-[#7480FF66] dark:text-white placeholder:dark:text-white |
| 96 | + ${suggestions.length > 0 ? "rounded-b-none" : ""}`} |
| 97 | + /> |
| 98 | + <button type="button" className="absolute inset-y-0 right-0 flex items-center pr-3"> |
| 99 | + <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-black dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| 100 | + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" /> |
| 101 | + </svg> |
| 102 | + </button> |
| 103 | + {suggestions.length > 0 && ( |
| 104 | + <ul ref={suggestionsRef} className="absolute z-20 max-h-[250px] w-full max-w-xl overflow-y-auto rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771]"> |
| 105 | + {suggestions.map((s, idx) => ( |
| 106 | + <li key={idx} onClick={() => handleSelectSubject(s)} className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"> |
| 107 | + {s} |
| 108 | + </li> |
| 109 | + ))} |
| 110 | + </ul> |
| 111 | + )} |
| 112 | + </div> |
| 113 | + |
| 114 | + <div className="flex justify-center gap-4 mb-8"> |
| 115 | + <Select onValueChange={setSelectedExam} disabled={!selectedSubject}> |
| 116 | + <SelectTrigger className="w-32"><SelectValue placeholder="Exam" /></SelectTrigger> |
| 117 | + <SelectContent>{exams.map((exam) => <SelectItem key={exam} value={exam}>{exam}</SelectItem>)}</SelectContent> |
| 118 | + </Select> |
| 119 | + <Select onValueChange={setSelectedSlot} disabled={!selectedSubject}> |
| 120 | + <SelectTrigger className="w-32"><SelectValue placeholder="Slot" /></SelectTrigger> |
| 121 | + <SelectContent>{slots.map((slot) => <SelectItem key={slot} value={slot}>{slot}</SelectItem>)}</SelectContent> |
| 122 | + </Select> |
| 123 | + <Select onValueChange={setSelectedYear} disabled={!selectedSubject}> |
| 124 | + <SelectTrigger className="w-32"><SelectValue placeholder="Year" /></SelectTrigger> |
| 125 | + <SelectContent> |
| 126 | + {[...years].sort((a, b) => Number(b) - Number(a)).map((year) => ( |
| 127 | + <SelectItem key={year} value={year}>{year}</SelectItem> |
| 128 | + ))} |
| 129 | + </SelectContent> |
| 130 | + |
| 131 | + </Select> |
| 132 | + </div> |
| 133 | + |
| 134 | + <Button className="px-8 py-3 rounded-lg text-base bg-[#4A55FF] hover:bg-[#3A44CC] text-white dark:bg-[#9EA8FF] dark:hover:bg-[#7D86E5] dark:text-black" onClick={handleSubmit}>Submit</Button> |
| 135 | + </div> |
| 136 | + |
| 137 | + { } |
| 138 | + <div className="max-w-6xl mx-auto mt-16 text-center"> |
| 139 | + <div className="relative mb-8 text-center"> |
| 140 | + <h3 className="font-vipnabd text-2xl font-bold">Explore More</h3> |
| 141 | + <div className="absolute right-0 top-1/2 -translate-y-1/2"> |
| 142 | + <Button variant="outline" className="border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"> |
| 143 | + View All |
| 144 | + <ArrowRight className="w-4 h-4 ml-2" /> |
| 145 | + </Button> |
| 146 | + </div> |
| 147 | + </div> |
| 148 | + |
| 149 | + |
| 150 | + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 justify-center"> |
| 151 | + {[1, 2, 3, 4].map((index) => ( |
| 152 | + <div key={index} className="bg-white dark:bg-[#303771] rounded-lg overflow-hidden shadow-md"> |
| 153 | + <div className="aspect-[4/3] bg-gray-200 dark:bg-gray-700 relative"> |
| 154 | + <Image |
| 155 | + src="/placeholder.svg?height=200&width=300&text=Paper" |
| 156 | + alt={`Paper ${index}`} |
| 157 | + width={300} |
| 158 | + height={200} |
| 159 | + className="w-full h-full object-cover opacity-60" |
| 160 | + /> |
| 161 | + </div> |
| 162 | + <div className="p-4"> |
| 163 | + <div className="flex flex-wrap gap-2"> |
| 164 | + <span className="bg-[#4A55FF]/20 dark:bg-[#9EA8FF]/20 text-[#4A55FF] dark:text-[#9EA8FF] px-2 py-1 rounded text-xs">C1</span> |
| 165 | + <span className="bg-[#4A55FF]/20 dark:bg-[#9EA8FF]/20 text-[#4A55FF] dark:text-[#9EA8FF] px-2 py-1 rounded text-xs">CAT-1</span> |
| 166 | + <span className="bg-[#4A55FF]/20 dark:bg-[#9EA8FF]/20 text-[#4A55FF] dark:text-[#9EA8FF] px-2 py-1 rounded text-xs">2024</span> |
| 167 | + <span className="bg-[#4A55FF]/20 dark:bg-[#9EA8FF]/20 text-[#4A55FF] dark:text-[#9EA8FF] px-2 py-1 rounded text-xs">Fall</span> |
| 168 | + </div> |
| 169 | + </div> |
| 170 | + </div> |
| 171 | + ))} |
| 172 | + </div> |
| 173 | + </div> |
| 174 | + </main> |
| 175 | + </div> |
| 176 | + ) |
| 177 | +} |
0 commit comments