refactored display components to use combined data file

Author: nnnwa76

frontend/src/components/About/ExecDisplay.tsx

@@ -1,12 +1,16 @@
 import { useState } from "react";
-import { EXECS } from "@/../public/data/execs";
+import { Exec } from "@/../public/data/members";
 
-const ExecDisplay = () => {
+type ExecDisplayProps = {
+  execs: Exec[];
+};
+
+const ExecDisplay = ({ execs }: ExecDisplayProps) => {
 	return (
 		<div className="my-5">
 			<h2 className="text-xl font-bold mb-2">Execs</h2>
 			<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-				{EXECS.map(exec => (
+				{execs.map(exec => (
 					<div>
 						<div>
 							<p>{exec.name}</p>

frontend/src/components/About/PortfolioDisplay.tsx

@@ -1,11 +1,15 @@
 import { useState } from "react";
 import PortfolioCard from "./PortfolioCard";
-import { PORTFOLIOS } from "@/../public/data/portfolios";
+import { PortfolioData } from "@/../public/data/members";
 
-const PortfolioDisplay = () => {
+type PortfolioDisplayProps = {
+  execs: PortfolioData[];
+};
+
+const PortfolioDisplay = ({ portfolios }: PortfolioDisplayProps) => {
   const [selectedPortfolio, setSelectedPortfolio] = useState("Careers");
 
-  const names = PORTFOLIOS.map(port => port.name);
+  const names = portfolios.map(port => port.name);
 
   return (
     <div>
@@ -25,7 +29,7 @@ const PortfolioDisplay = () => {
         ))}
       </div>
 
-      <PortfolioCard portfolio={PORTFOLIOS.find(port => port.name === selectedPortfolio) ?? PORTFOLIOS[0]} />
+      <PortfolioCard portfolio={portfolios.find(port => port.name === selectedPortfolio) ?? portfolios[0]} />
     </div>
   )
 }

frontend/src/pages/about/execs-directors-subcoms.tsx

@@ -3,7 +3,7 @@ import ExecDisplay from "@/components/About/ExecDisplay";
 import Layout from "@/components/Layout";
 import PageBody from "@/components/PageBody";
 import PageTitle from "@/components/PageTitle";
-import { EXECS } from "@/../public/data/execs";
+import { teamData } from "@/../public/data/years/2025";
 
 const ExecsDirectorsSubcommitteesPage = () => {
   return (
@@ -25,7 +25,7 @@ const ExecsDirectorsSubcommitteesPage = () => {
         </div>
 
         {/* EXECS */}
-        <ExecDisplay />
+        <ExecDisplay execs={teamData.execs} />
 
         <div className="border-t border-gray-300 my-10"></div>
 
@@ -38,7 +38,7 @@ const ExecsDirectorsSubcommitteesPage = () => {
             </p>
           </div>
 
-          <PortfolioDisplay />
+          <PortfolioDisplay portfolios={teamData.portfolios} />
 
         </div>
       </PageBody>