103 lines
5.7 KiB
TypeScript
103 lines
5.7 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Search, Plus, Filter, MoreHorizontal, Edit, Trash } from "lucide-react"
|
|
|
|
export default function QuestionsPage() {
|
|
const questions = [
|
|
{ id: "Q-NEET-2026-001", subject: "Physics", chapter: "Thermodynamics", type: "MCQ", difficulty: "Hard", status: "Active" },
|
|
{ id: "Q-NEET-2026-002", subject: "Chemistry", chapter: "Organic Chemistry", type: "Assertion/Reason", difficulty: "Medium", status: "Active" },
|
|
{ id: "Q-JEE-2026-003", subject: "Mathematics", chapter: "Calculus", type: "Numerical", difficulty: "Expert", status: "Review" },
|
|
{ id: "Q-NEET-2026-004", subject: "Biology", chapter: "Genetics", type: "MCQ", difficulty: "Easy", status: "Active" },
|
|
{ id: "Q-JEE-2026-005", subject: "Physics", chapter: "Mechanics", type: "MCQ", difficulty: "Medium", status: "Draft" },
|
|
]
|
|
|
|
return (
|
|
<div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Question Bank</h1>
|
|
<p className="text-muted-foreground mt-1">Manage and curate the global repository for NEET/JEE.</p>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<Button variant="outline" className="border-border hover:bg-secondary"><Filter size={16} className="mr-2"/> Filter</Button>
|
|
<Button className="bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold"><Plus size={16} className="mr-2"/> Add Question</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-secondary/10 border border-border rounded-xl overflow-hidden backdrop-blur-sm">
|
|
<div className="p-4 border-b border-border flex items-center gap-4">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by ID, concept, or chapter..."
|
|
className="w-full bg-background border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm whitespace-nowrap">
|
|
<thead className="bg-secondary/30 text-muted-foreground border-b border-border">
|
|
<tr>
|
|
<th className="px-6 py-4 font-semibold">Question ID</th>
|
|
<th className="px-6 py-4 font-semibold">Subject</th>
|
|
<th className="px-6 py-4 font-semibold">Chapter</th>
|
|
<th className="px-6 py-4 font-semibold">Type</th>
|
|
<th className="px-6 py-4 font-semibold">Difficulty</th>
|
|
<th className="px-6 py-4 font-semibold">Status</th>
|
|
<th className="px-6 py-4 font-semibold text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{questions.map((q) => (
|
|
<tr key={q.id} className="hover:bg-secondary/20 transition-colors">
|
|
<td className="px-6 py-4 font-mono font-medium">{q.id}</td>
|
|
<td className="px-6 py-4">
|
|
<Badge variant="outline" className="bg-background">{q.subject}</Badge>
|
|
</td>
|
|
<td className="px-6 py-4">{q.chapter}</td>
|
|
<td className="px-6 py-4 text-muted-foreground">{q.type}</td>
|
|
<td className="px-6 py-4">
|
|
<Badge className={
|
|
q.difficulty === "Expert" ? "bg-red-500/10 text-red-500 border-red-500/20" :
|
|
q.difficulty === "Hard" ? "bg-orange-500/10 text-orange-500 border-orange-500/20" :
|
|
q.difficulty === "Medium" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" :
|
|
"bg-green-500/10 text-green-500 border-green-500/20"
|
|
} variant="outline">
|
|
{q.difficulty}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<Badge className={
|
|
q.status === "Active" ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" :
|
|
q.status === "Review" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" :
|
|
"bg-muted/50 text-muted-foreground border-border"
|
|
} variant="outline">
|
|
{q.status}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<div className="flex justify-end gap-2 text-muted-foreground">
|
|
<button className="p-1.5 hover:text-[#00F0FF] hover:bg-secondary rounded"><Edit size={16} /></button>
|
|
<button className="p-1.5 hover:text-red-500 hover:bg-secondary rounded"><Trash size={16} /></button>
|
|
<button className="p-1.5 hover:text-foreground hover:bg-secondary rounded"><MoreHorizontal size={16} /></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="p-4 border-t border-border flex justify-between items-center text-sm text-muted-foreground">
|
|
<span>Showing 1 to 5 of 12,405 entries</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" disabled>Previous</Button>
|
|
<Button variant="outline" size="sm">Next</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|