improve viewing experience for prev sem officers

Author: Qile0317

src/pages/Officers.tsx

@@ -5,6 +5,7 @@ import { useOfficersFa25 } from "@/hooks/useOfficersFa25";
 import { OfficerCard } from "@/components/OfficerCard";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const Officers = () => {
   const { officers, loading, error } = useOfficers(); // Current officers from Notion (SP26+)
@@ -55,14 +56,56 @@ const Officers = () => {
           </p>
         </div>
 
-        {/* Current semester officers */}
-        <div className="flex flex-wrap justify-center gap-6">
-          {officers.map((officer, index) => (
-            <div key={index} className="w-full sm:w-[calc(50%-0.75rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1.125rem)]">
-              <OfficerCard officer={officer} />
+        <Tabs defaultValue="current" className="w-full">
+          <TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
+            <TabsTrigger value="current">Spring 2026</TabsTrigger>
+            <TabsTrigger value="previous">Previous Semesters</TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="current" className="mt-0">
+            <div className="flex flex-wrap justify-center gap-6">
+              {officers.map((officer, index) => (
+                <div key={index} className="w-full sm:w-[calc(50%-0.75rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1.125rem)]">
+                  <OfficerCard officer={officer} />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
+          </TabsContent>
+          
+          <TabsContent value="previous" className="mt-0">
+            <div className="max-w-4xl mx-auto">
+              <Accordion type="single" collapsible className="w-full" defaultValue="fa25">
+                <AccordionItem value="fa25" className="border-bio-green/20">
+                  <AccordionTrigger className="text-xl font-semibold hover:text-bio-green">
+                    Fall 2025
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    {loadingFa25 ? (
+                      <div className="flex items-center justify-center py-8">
+                        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-bio-green"></div>
+                      </div>
+                    ) : errorFa25 ? (
+                      <Alert>
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertDescription>
+                          Unable to load Fall 2025 officers data.
+                        </AlertDescription>
+                      </Alert>
+                    ) : (
+                      <div className="flex flex-wrap justify-center gap-6 pt-4">
+                        {officersFa25.map((officer, index) => (
+                          <div key={index} className="w-full sm:w-[calc(50%-0.75rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1.125rem)]">
+                            <OfficerCard officer={officer} />
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          </TabsContent>
+        </Tabs>
 
         <div className="mt-16 text-center">
           <Card className="border-bio-green/20 max-w-2xl mx-auto">
@@ -85,44 +128,6 @@ const Officers = () => {
             </CardContent>
           </Card>
         </div>
-
-        {/* Previous Semesters Section */}
-        <div className="mt-16">
-          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-center bg-gradient-bio bg-clip-text text-transparent">
-            Previous Semesters
-          </h2>
-          <div className="max-w-4xl mx-auto">
-            <Accordion type="single" collapsible className="w-full">
-              <AccordionItem value="fa25" className="border-bio-green/20">
-                <AccordionTrigger className="text-xl font-semibold hover:text-bio-green">
-                  Fall 2025
-                </AccordionTrigger>
-                <AccordionContent>
-                  {loadingFa25 ? (
-                    <div className="flex items-center justify-center py-8">
-                      <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-bio-green"></div>
-                    </div>
-                  ) : errorFa25 ? (
-                    <Alert>
-                      <AlertCircle className="h-4 w-4" />
-                      <AlertDescription>
-                        Unable to load Fall 2025 officers data.
-                      </AlertDescription>
-                    </Alert>
-                  ) : (
-                    <div className="flex flex-wrap justify-center gap-6 pt-4">
-                      {officersFa25.map((officer, index) => (
-                        <div key={index} className="w-full sm:w-[calc(50%-0.75rem)] md:w-[calc(33.333%-1rem)] lg:w-[calc(25%-1.125rem)]">
-                          <OfficerCard officer={officer} />
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </div>
-        </div>
       </div>
     </div>
   );