Updated icons to use react-icons (#7)

* Added Icon component with react-icons

* Updated footer to use icon component

* Merged Hero changes

components/footer.jsx

@@ -1,24 +1,20 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import {
-  IoLogoGithub,
-  IoLogoInstagram,
-  IoLogoLinkedin,
-} from 'react-icons/io';
+import Link from "next/link";
+import Image from "next/image";
+import Icon from "./icon";
 
 export default function Footer() {
   return (
     <footer className="p-4 flex items-center justify-center gap-2">
       <Link href="/">Logo</Link>
 
       <Link href="https://github.com/MichiganDataScienceTeam">
-        <IoLogoGithub className="text-4xl" />
+        <Icon name="github" className="text-4xl" />
       </Link>
       <Link href="https://instagram.com/your-instagram">
-        <IoLogoInstagram className="text-4xl" />
+        <Icon name="instagram" className="text-4xl" />
       </Link>
       <Link href="https://linkedin.com/your-linkedin">
-        <IoLogoLinkedin className="text-4xl" />
+        <Icon name="linkedin" className="text-4xl" />
       </Link>
     </footer>
   );

components/icon.jsx

@@ -0,0 +1,26 @@
+import {
+  FaInstagram,
+  FaLinkedin,
+  FaEnvelope,
+  FaAngleDown,
+  FaAngleUp,
+  FaGithub,
+} from "react-icons/fa6";
+import { createElement } from "react";
+
+const iconMap = {
+  envelope: FaEnvelope,
+  instagram: FaInstagram,
+  linkedin: FaLinkedin,
+  github: FaGithub,
+  caret_up: FaAngleUp,
+  caret_down: FaAngleDown,
+};
+
+export default function Icon(props) {
+  if (!(props.name in iconMap)) {
+    console.error("Could not find name " + props.name);
+    return null;
+  }
+  return createElement(iconMap[props.name], props);
+}

config/contact.json

@@ -1,43 +1,46 @@
 [
   {
+    "id": "students",
     "heading": "For Students",
     "text": "Have questions about joining MDST? Curious about our projects? Or just want to keep up with our socials? Send us an email, check out our Instagram, and connect with us on LinkedIn!",
     "sources": [
       {
         "name": "Email",
-        "icon_name": ["far", "envelope"],
+        "icon_name": "envelope",
         "link": "mailto:[email protected]"
       },
       {
         "name": "Instagram",
-        "icon_name": ["fab", "instagram"],
+        "icon_name": "instagram",
         "link": "https://www.instagram.com/michigandatascienceteam/"
       },
       {
         "name": "LinkedIn",
-        "icon_name": ["fab", "linkedin"],
+        "icon_name": "linkedin",
         "link": "https://www.linkedin.com/school/michigan-data-science-team/"
       }
     ]
   },
   {
+    "id": "departments",
     "heading": "For University of Michigan Departments",
     "text": "MDST would be delighted to partner with your department to promote your data science efforts to our students. Please contact us if you are interested in hosting a talk or sponsoring our club.",
     "sources": [
       {
         "name": "Email",
-        "icon_name": ["far", "envelope"],
+        "icon_name": "envelope",
         "link": "mailto:[email protected]"
       }
     ]
   },
   {
+    "id": "industry",
     "heading": "For Industry Partners",
     "text": "Partner with MDST to find top data science talent and power your company's mission. We offer engagement and sponsorship opportunities to fit your needs. Please email us at [email protected] to learn more.",
     "sources": [
       {
         "name": "Email",
-        "icon_name": ["far", "envelope"],
+        "icon_name": "envelope",
         "link": "mailto:[email protected]"
       }
     ]

package.json

@@ -10,11 +10,6 @@
     "export": "next export -o out"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",

pages/_app.jsx

@@ -1,5 +1,4 @@
 import "@/styles/globals.css";
-import "../shared/icons";
 
 export default function App({ Component, pageProps }) {
   return (

pages/contact.jsx

@@ -1,16 +1,16 @@
 import Layout from "@/components/layout";
-import Wave from "@/components/wave";
 import path from "path";
 import Link from "next/link";
 import fs from "fs";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Icon from "@/components/icon";
 import { useState } from "react";
 import Hero from "@/components/hero";
+
 function Accordion({ entries }) {
   const [entryStates, setEntryStates] = useState(
     entries.map((entry, index) => {
       return {
-        key: index,
+        key: entry.id,
         heading: entry.heading,
         text: entry.text,
         expand: index == 0,
@@ -33,28 +33,28 @@ function Accordion({ entries }) {
   return (
     <div className="max-w-4xl mx-auto px-8 py-2 rounded-lg bg-grey">
       {entryStates.map((entry, index) => (
-        <div key={entry.index} className="transition">
+        <div key={entry.id} className="transition">
           <div className={`pt-5 ${!entry.expand ? "pb-5" : "pb-2"}`}>
             <div className="flex justify-between">
-              <h1 className="text-4xl font-bold">{entry.heading}</h1>
+              <h1 className="text-3xl font-bold">{entry.heading}</h1>
               <button onClick={() => expandAccordionEntry(index)}>
-                <FontAwesomeIcon
-                  icon={entry.expand ? "fa-caret-up" : "fa-caret-down"}
-                  size="xl"
-                />
+                <Icon name={entry.expand ? "caret_down" : "caret_up"} />
               </button>
             </div>
             {entry.expand ? (
               <div className="mt-4">
                 {entry.text}
                 <div className="flex justify-center">
-                  {entry.sources.map((source, index) => (
+                  {entry.sources.map((source) => (
                     <Link
-                      key={index}
+                      key={source.name}
                       href={source.link}
                       className="text-center p-4 m-2 bg-grey-light w-40 rounded-lg"
                     >
-                      <FontAwesomeIcon icon={source.icon_name} size="2xl" />
+                      <Icon
+                        name={source.icon_name}
+                        className="text-4xl inline"
+                      />
                       <p className="font-bold text-lg">{source.name}</p>
                     </Link>
                   ))}