Merge version_3_1782383429635 into main #4
@@ -7,8 +7,8 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { Search, GraduationCap, BookOpen, Award } from "lucide-react";
|
||||
|
||||
export default function ResultSearch() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [hasSearched, setHasSearched] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("2025-ag-11653");
|
||||
const [hasSearched, setHasSearched] = useState(true);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -16,21 +16,42 @@ export default function ResultSearch() {
|
||||
setHasSearched(true);
|
||||
} else if (searchQuery.trim() !== "") {
|
||||
alert("Please enter a valid AG No. (e.g., 2025-ag-11653)");
|
||||
setHasSearched(false);
|
||||
}
|
||||
};
|
||||
|
||||
const semester1 = [
|
||||
{ code: "SOC-311", credit: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "PY-305", credit: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "MATH-408", credit: "3(3-0)", marks: "35", grade: "C" },
|
||||
{ code: "ECON-305", credit: "2(2-0)", marks: "31", grade: "B" },
|
||||
{ code: "FA-310", credit: "2(2-0)", marks: "18", grade: "D" },
|
||||
{ code: "CS-305", credit: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "SSH-302", credit: "2(2-0)", marks: "30", grade: "B" },
|
||||
];
|
||||
|
||||
const semester2 = [
|
||||
{ code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "D" },
|
||||
{ code: "CS 306", credit: "3(3-0)", marks: "41", grade: "B" },
|
||||
{ code: "MATH 404", credit: "3(3-0)", marks: "39", grade: "B" },
|
||||
{ code: "IS 401", credit: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "ENG 307", credit: "3(3-0)", marks: "42", grade: "B" },
|
||||
{ code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "C" },
|
||||
{ code: "PHY 305", credit: "3(3-0)", marks: "38", grade: "C" },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative w-full py-24 bg-background" id="lookup" data-webild-section="result-search">
|
||||
<section className="relative w-full bg-background" id="lookup" data-webild-section="result-search">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="fade">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<div className="text-center max-w-content-width mx-auto">
|
||||
<h2 className="text-4xl font-bold text-foreground mb-4">Student Results Portal</h2>
|
||||
<p className="text-lg text-accent">Enter your AG number to view your complete academic performance.</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fade" delay={0.1}>
|
||||
<Card className="max-w-xl mx-auto p-8 mb-16">
|
||||
<Card className="max-w-content-width mx-auto p-8 card border border-primary-cta shadow-lg">
|
||||
<form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent" />
|
||||
@@ -39,7 +60,7 @@ export default function ResultSearch() {
|
||||
placeholder="Enter AG No. (e.g., 2025-ag-11653)"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10"
|
||||
className="w-full border-primary-cta/30 focus:border-primary-cta"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -50,12 +71,12 @@ export default function ResultSearch() {
|
||||
|
||||
{hasSearched && (
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div className="max-w-content-width mx-auto space-y-8">
|
||||
{/* Section 1: Student Info */}
|
||||
<Card className="p-6 sm:p-8 border-l-4 border-primary-cta">
|
||||
<Card className="p-6 sm:p-8 border-l-4 border-primary-cta card shadow-md">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-full bg-background-accent flex items-center justify-center text-primary-cta">
|
||||
<div className="w-16 h-16 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
|
||||
<GraduationCap className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -71,75 +92,75 @@ export default function ResultSearch() {
|
||||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Section 2: Spring Semester */}
|
||||
<Card className="p-6 sm:p-8">
|
||||
{/* Section 2: 1st Semester */}
|
||||
<Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
|
||||
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
|
||||
<BookOpen className="w-6 h-6 text-primary-cta" />
|
||||
<h4 className="text-xl font-bold text-foreground">Spring Semester (1st)</h4>
|
||||
<h4 className="text-xl font-bold text-foreground">1st Semester</h4>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{[
|
||||
{ code: "SOC-311", cr: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "PY-305", cr: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "MATH-408", cr: "3(3-0)", marks: "35", grade: "C" },
|
||||
{ code: "ECON-305", cr: "2(2-0)", marks: "31", grade: "B" },
|
||||
{ code: "FA-310", cr: "2(2-0)", marks: "18", grade: "D" },
|
||||
{ code: "CS-305", cr: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "SSH-302", cr: "2(2-0)", marks: "30", grade: "B" },
|
||||
].map((course, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex gap-4 w-1/2">
|
||||
<span className="font-mono font-medium text-foreground w-20">{course.code}</span>
|
||||
<span className="text-accent">{course.cr}</span>
|
||||
</div>
|
||||
<div className="flex gap-4 w-1/2 justify-end">
|
||||
<span className="text-accent w-8 text-right">{course.marks}</span>
|
||||
<span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs text-accent uppercase bg-background-accent/10">
|
||||
<tr>
|
||||
<th className="px-4 py-3 rounded-tl">Course</th>
|
||||
<th className="px-4 py-3">Cr.Hr</th>
|
||||
<th className="px-4 py-3">Marks</th>
|
||||
<th className="px-4 py-3 rounded-tr">Grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{semester1.map((item, idx) => (
|
||||
<tr key={idx} className="border-b border-background-accent/10 last:border-0">
|
||||
<td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
|
||||
<td className="px-4 py-3 text-accent">{item.credit}</td>
|
||||
<td className="px-4 py-3 text-accent">{item.marks}</td>
|
||||
<td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-background-accent/30 flex justify-between items-center">
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
|
||||
<span className="font-semibold text-foreground">Semester GPA</span>
|
||||
<span className="text-2xl font-bold text-foreground">3.00</span>
|
||||
<span className="text-2xl font-bold text-primary-cta">3.00</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Section 3: Winter Semester */}
|
||||
<Card className="p-6 sm:p-8">
|
||||
{/* Section 3: 2nd Semester */}
|
||||
<Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
|
||||
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
|
||||
<Award className="w-6 h-6 text-primary-cta" />
|
||||
<h4 className="text-xl font-bold text-foreground">Winter Semester (2nd)</h4>
|
||||
<h4 className="text-xl font-bold text-foreground">2nd Semester</h4>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{[
|
||||
{ code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "D" },
|
||||
{ code: "CS 306", cr: "3(3-0)", marks: "41", grade: "B" },
|
||||
{ code: "MATH 404", cr: "3(3-0)", marks: "39", grade: "B" },
|
||||
{ code: "IS 401", cr: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "ENG 307", cr: "3(3-0)", marks: "42", grade: "B" },
|
||||
{ code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "C" },
|
||||
{ code: "PHY 305", cr: "3(3-0)", marks: "38", grade: "C" },
|
||||
].map((course, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex gap-4 w-1/2">
|
||||
<span className="font-mono font-medium text-foreground w-20">{course.code}</span>
|
||||
<span className="text-accent">{course.cr}</span>
|
||||
</div>
|
||||
<div className="flex gap-4 w-1/2 justify-end">
|
||||
<span className="text-accent w-8 text-right">{course.marks}</span>
|
||||
<span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs text-accent uppercase bg-background-accent/10">
|
||||
<tr>
|
||||
<th className="px-4 py-3 rounded-tl">Course</th>
|
||||
<th className="px-4 py-3">Cr.Hr</th>
|
||||
<th className="px-4 py-3">Marks</th>
|
||||
<th className="px-4 py-3 rounded-tr">Grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{semester2.map((item, idx) => (
|
||||
<tr key={idx} className="border-b border-background-accent/10 last:border-0">
|
||||
<td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
|
||||
<td className="px-4 py-3 text-accent">{item.credit}</td>
|
||||
<td className="px-4 py-3 text-accent">{item.marks}</td>
|
||||
<td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-background-accent/30 flex justify-between items-center">
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
|
||||
<span className="font-semibold text-foreground">Semester GPA</span>
|
||||
<span className="text-2xl font-bold text-foreground">2.95</span>
|
||||
<span className="text-2xl font-bold text-primary-cta">2.95</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user