Merge pull request #61 from brainhack-vandy/speakers-tab

Speakers tab

Author: shansitads

public/assets/speakers/adina_wagner.jpg

@@ -4,18 +4,30 @@ import Navbar from "./components/Navbar";
 import Home from "./components/Home/Home";
 import Projects from "./components/Projects/Projects";
 import FAQ from "./components/Faq";
+import Speakers from "./components/Speakers/Speakers";
 import Footer from "./components/Footer";
 import Teams from './components/Team/Team';
 import Schedule from "./components/Schedule/Schedule";
 import {
   HashRouter as Router,
   Route,
   Routes,
-  Navigate
+  Navigate,
+  useLocation
 } from "react-router-dom";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
 function App() {
   const [load, upadateLoad] = useState(true);
 
@@ -29,6 +41,7 @@ function App() {
 
   return (
     <Router>
+      <ScrollToTop />
       <LoadingAnimation load={load} />
       <div className="App" id={load ? "no-scroll" : "scroll"}>
         <Navbar />
@@ -38,6 +51,7 @@ function App() {
           <Route path="/projects" element={<Projects />} />
           <Route path="/team" element={<Teams />} />
           <Route path="/faq" element={<FAQ />} />
+          <Route path="/speakers" element={<Speakers />} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
         <Footer />

public/assets/speakers/anastasia_yendiki.jpg

@@ -13,6 +13,8 @@ import {
 } from "react-icons/ai";
 import Button from "react-bootstrap/Button";
 import { CgGitFork } from "react-icons/cg";
+import { RiSpeakLine } from "react-icons/ri";
+
 
 function NavBar() {
   const [expand, updateExpanded] = useState(false);
@@ -75,6 +77,12 @@ function NavBar() {
               </Nav.Link>
             </Nav.Item>
 
+            <Nav.Item>
+              <Nav.Link as={Link} to="/speakers" onClick={() => updateExpanded(false)}>
+                <RiSpeakLine className="nav-icon" /> Speakers
+              </Nav.Link>
+            </Nav.Item>
+
             <Nav.Item>
               <Nav.Link as={Link} to="/team" onClick={() => updateExpanded(false)}>
                 <AiOutlineTeam className="nav-icon" /> Team

public/assets/speakers/james_booth.jpg

@@ -53,7 +53,7 @@ const ScheduleCalendar = () => {
       case 'hacking':
         return ['event-color-3'];
       case 'keynote':
-        return ['event-color-4'];
+        return ['event-color-4', 'clickable-event'];
       case 'unconference':
         return ['event-color-5'];
       default:
@@ -62,14 +62,12 @@ const ScheduleCalendar = () => {
   };
 
   const renderEventContent = (eventInfo) => {
-    const isClickable = ['workshop', 'keynote'].includes(eventInfo.event.extendedProps.type);
+    const isKeynote = eventInfo.event.extendedProps.type === 'keynote'
 
-    if (isClickable) {
+    if (isKeynote) {
       return (
         <a
-          href="https://brainhack-vandy.github.io/"
-          target="_blank"
-          rel="noopener noreferrer"
+          href={`#/speakers`}
           className="custom-event-content clickable"
           onClick={(e) => e.stopPropagation()}
         >
@@ -78,6 +76,22 @@ const ScheduleCalendar = () => {
       );
     }
 
+    // const isWorkshop = eventInfo.event.extendedProps.type === 'workshop';
+
+    // if (isWorkshop) {
+    //   return (
+    //     <a
+    //       href="https://brainhack-vandy.github.io/"
+    //       target="_blank"
+    //       rel="noopener noreferrer"
+    //       className="custom-event-content clickable"
+    //       onClick={(e) => e.stopPropagation()}
+    //     >
+    //       <div className="event-title">{eventInfo.event.title}</div>
+    //     </a>
+    //   );
+    // }
+
     return (
       <div className="custom-event-content">
         <div className="event-title">{eventInfo.event.title}</div>