Finished Adding Types to Little Components

src/components/Button/RegularButton.tsx

@@ -1,6 +1,10 @@
 import PropTypes from "prop-types";
 
-function RegularButton({ name }) {
+type RegularButtonTypes = {
+  name: string;
+};
+
+function RegularButton({ name }: RegularButtonTypes) {
   return (
     <button type="button" className="regular-btn">
       <span className="btn-text">{name}</span>
@@ -9,7 +13,3 @@ function RegularButton({ name }) {
 }
 
 export default RegularButton;
-
-RegularButton.propTypes = {
-  name: PropTypes.string.isRequired,
-};

src/components/Button/RoundedButton.tsx

@@ -1,6 +1,10 @@
 import PropTypes from "prop-types";
 
-function RoundedButton({ name }) {
+type RoundedButtonTypes = {
+  name: string;
+};
+
+function RoundedButton({ name }: RoundedButtonTypes) {
   return (
     <button type="button" className="rounded-btn">
       <span className="btn-text">{name}</span>

src/components/Info/InfoList.tsx

@@ -1,3 +1,12 @@
+import { ReactNode } from "react";
+
+type ContentItemTypes = {
+  id: number;
+  title: string;
+  content: ReactNode;
+  button: string;
+};
+
 const content = [
   {
     id: 1,

src/components/Mobile/MobileNav.tsx

@@ -1,8 +1,12 @@
-import PropTypes from "prop-types";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { LiaTimesSolid } from "react-icons/lia";
 
-export default function MobileNav({ setIsOpen, isOpen }) {
+type setIsOpenTypes = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export default function MobileNav({ setIsOpen, isOpen }: setIsOpenTypes) {
   return (
     <nav className="w-full sm:hidden flex justify-between py-5 px-5 z-99999">
       <button onClick={() => setIsOpen(!isOpen)}>
@@ -18,8 +22,3 @@ export default function MobileNav({ setIsOpen, isOpen }) {
     </nav>
   );
 }
-
-MobileNav.propTypes = {
-  setIsOpen: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-};

src/components/Sponsors/SponsorsMarquee.tsx

@@ -1,9 +1,19 @@
+import sponsors from "./sponsors.json";
+import amazon from "./logo/amazon.png";
+import statefarm from "./logo/statefarm.png";
+import drivetime from "./logo/drivetime.png";
+import deloitte from "./logo/deloitte.png";
+import goldmansachs from "./logo/goldmansachs.png";
+import garmin from "./logo/garmin.png";
+import starbucks from "./logo/starbucks.png";
+import paypal from "./logo/paypal.png";
+import godaddy from "./logo/godaddy.png";
 import axosoft from "./logo/axosoft.png";
 import workiva from "./logo/workiva.png";
 import generalmotors from "./logo/generalmotors.png";
 import americanexpress from "./logo/americanexpress.png";
 
-type SponsorName =
+type SponsorLogo =
   | "amazon"
   | "statefarm"
   | "drivetime"
@@ -18,37 +28,17 @@ type SponsorName =
   | "workiva"
   | "generalmotors";
 
-type Sponsor = {
-  name: SponsorName;
-};
-
-const sponsors: Sponsor[] = [
-  { name: "amazon" },
-  { name: "statefarm" },
-  { name: "drivetime" },
-  { name: "deloitte" },
-  { name: "goldmansachs" },
-  { name: "garmin" },
-  { name: "starbucks" },
-  { name: "paypal" },
-  { name: "godaddy" },
-  { name: "americanexpress" },
-  { name: "axosoft" },
-  { name: "workiva" },
-  { name: "generalmotors" },
-];
-
 function SponsorsMarquee() {
-  const logoMap: Record<SponsorName, string> = {
-    amazon: "./logo/amazon.png",
-    statefarm: "./logo/statefarm.png",
-    drivetime: "./logo/drivetime.png",
-    deloitte: "./logo/deloitte.png",
-    goldmansachs: "./logo/goldmansachs.png",
-    garmin: "./logo/garmin.png",
-    starbucks: "./logo/starbucks.png",
-    paypal: "./logo/paypal.png",
-    godaddy: "./logo/godaddy.png",
+  const logoMap: Record<SponsorLogo, string> = {
+    amazon,
+    statefarm,
+    drivetime,
+    deloitte,
+    goldmansachs,
+    garmin,
+    starbucks,
+    paypal,
+    godaddy,
     americanexpress,
     axosoft,
     workiva,
@@ -65,15 +55,15 @@ function SponsorsMarquee() {
           {sponsors.map((element, index) => (
             <img
               key={index}
-              src={logoMap[element.name]}
+              src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
               className="w-[10vw] object-contain"
             />
           ))}
           {sponsors.map((element, index) => (
             <img
               key={index}
-              src={logoMap[element.name]}
+              src={logoMap[element.name as SponsorLogo]} // Casting element.name to SponsorLogo
               alt={element.name}
               className="w-[12vw] object-contain"
             />

src/components/Stats/Statistics.tsx

@@ -16,21 +16,21 @@ const statistics = [
     label: "worth of pizza served",
     value: 22500,
     steps: 1000,
-    formatter: (x) => dollarFormatter.format(x),
+    formatter: (x: number) => <>{dollarFormatter.format(x)}</>,
   },
   {
     key: "sponsors",
     label: "Sponsors",
     value: 12,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "teams",
     label: "Committees",
     value: Object.keys(teams).length,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "officers",
@@ -39,14 +39,14 @@ const statistics = [
       return total + team.length;
     }, 0),
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
   {
     key: "advisors",
     label: "Advisors",
     value: Object.keys(advisors).length,
     steps: 1,
-    formatter: (x) => x,
+    formatter: (x: number) => <>{x}</>,
   },
 ];
 

src/components/Team/TeamCards.tsx

@@ -1,11 +1,33 @@
 import React, { Component } from "react";
 import { Card, Divider, Popup, Image } from "semantic-ui-react";
-
-import contacts from "./TeamList.json";
 import "./TeamCards.css";
 
-class MemberCards extends Component {
-  constructor(props) {
+import contactsData from "./TeamList.json";
+const contacts: Contacts = contactsData as Contacts;
+
+type TeamMember = {
+  name: string;
+  role: string;
+  email: string;
+  image: string;
+};
+
+type Teams = {
+  [team: string]: TeamMember[];
+};
+
+interface Contacts {
+  advisors: TeamMember[];
+  teams: Teams;
+}
+
+// Define the props interface
+interface MemberCardsProps {
+  contacts: Contacts;
+}
+
+class MemberCards extends Component<MemberCardsProps> {
+  constructor(props: MemberCardsProps) {
     super(props);
     this.onGClick = this.onGClick.bind(this);
     this.onIClick = this.onIClick.bind(this);

src/components/logic/AnimatedNumber.js → src/components/logic/AnimatedNumber.ts

@@ -1,10 +1,16 @@
 import { useState, useEffect } from "react";
 
-const AnimatedNumber = ({ number, steps, formatter }) => {
+type AnimatedNumberTypes = {
+  number: number;
+  steps: number;
+  formatter: (x: number) => JSX.Element;
+};
+
+const AnimatedNumber = ({ number, steps, formatter }: AnimatedNumberTypes) => {
   const [animatedNumber, setAnimatedNumber] = useState(0);
 
   // Adjusted model function for faster animation
-  const model = (nextNumber, step) => {
+  const model = (nextNumber: number, step: number): number => {
     // Increase the base delay for faster animation
     const baseDelay = 10; // Lower base delay for faster animation
     const delayFactor = Math.abs(number - nextNumber) / step;