GSOC Archive

src/App.js

@@ -24,6 +24,9 @@ import Loading from './Components/Loading/Loading'
 import getDomainList from './Helper/getDomainList';
 import SearchBox from './Components/SearchBox/SearchBox';
 import Apiday from './Pages/Apiday/Apiday';
+import Organisations from './Pages/Organisation/Organisations';
+import People from './Pages/People/People';
+import Organisation from './Pages/Organisation/Organisation';
 
 function App() {
   const location = useLocation();
@@ -83,6 +86,9 @@ function App() {
           <Route path='/api-day' element={<Apiday/>} />
           <Route exact path="/" element={<Navigate replace to="/home" />} />
           <Route path='/*' element={<NotFound/>} />
+          <Route path='/organisations' element={<Organisations/>} />
+          <Route path='/organisations/:slug' element={<Organisation/>} />
+          <Route path='/people' element={<People/>} />
         </Routes>
         }
         <Footer />

src/Components/FilterSidebar/FilterSidebar.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import './FilterSidebar.scss';
+
+const FilterSidebar = ({ initialFilters, data, onFilterChange }) => {
+    const [filters, setFilters] = useState(initialFilters);
+
+    const handleFilterChange = (filterName, itemName) => {
+        // Update the filters state with the new filter value
+        const updatedFilters = {
+            ...filters,
+            [filterName]: {
+                ...filters[filterName],
+                [itemName]: !filters[filterName][itemName],
+            },
+        };
+        setFilters(updatedFilters);
+        // Call the onFilterChange callback with the updated filter values
+        onFilterChange(filterName, itemName);
+    };
+
+    return (
+        <div className="filter-sidebar">
+            <h2 className="filter-sidebar__title">Filters</h2>
+            <div className="filter-sidebar__section">
+                {Object.keys(filters).map((filterName) => (
+                    <div className="filter-sidebar__option" key={filterName}>
+                        <h4 className="filter-sidebar__option-title">
+                            {/* Capitalize the filter name */}
+                            {filterName.charAt(0).toUpperCase() + filterName.slice(1)}
+                        </h4>
+                        <ul className="filter-sidebar__option-list">
+                            {data[filterName].map((item) => (
+                                <li className="filter-sidebar__option-item" key={item}>
+                                    <input
+                                        className="filter-sidebar__option-checkbox"
+                                        type="checkbox"
+                                        checked={filters[filterName][item]}
+                                        onChange={() => handleFilterChange(filterName, item)}
+                                    />
+                                    {item}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default FilterSidebar;

src/Components/FilterSidebar/FilterSidebar.scss

@@ -0,0 +1,42 @@
+@import '../../colors.scss';
+
+.filter-sidebar {
+    .filter-sidebar__title {
+      color: $purple;
+      font-size: 24px;
+      margin-bottom: 48px;
+      text-align: center;
+    }
+
+    .filter-sidebar__section {
+      margin-bottom: 32px;
+    }
+
+    .filter-sidebar__section-title {
+      font-size: 20px;
+      margin-bottom: 16px;
+    }
+
+    .filter-sidebar__option {
+      margin-bottom: 16px;
+    }
+
+    .filter-sidebar__option-title {
+      font-size: 16px;
+      margin-bottom: 8px;
+      text-decoration: underline;
+    }
+
+    .filter-sidebar__option-list {
+      list-style: none;
+      padding: 0;
+    }
+
+    .filter-sidebar__option-item {
+      margin-bottom: 8px;
+
+      .filter-sidebar__option-checkbox {
+        margin-right: 8px;
+      }
+    }
+  }

src/Components/Navbar/Navbar.jsx

@@ -7,6 +7,7 @@ import { AiOutlineClose } from 'react-icons/ai';
 import { FaLongArrowAltUp } from 'react-icons/fa';
 import { HiOutlineSearchCircle } from 'react-icons/hi';
 import { motion, AnimatePresence } from "framer-motion";
+import { GoTriangleDown } from "react-icons/go";
 
 import './Navbar.scss'
 import logo from '../../Assets/logo.svg';
@@ -19,9 +20,14 @@ function Navbar({setSearchOpen}) {
     const [top, setTop] = useState(true);
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [isMouse, toggleMouse] = React.useState(false);
+    const [isMouseTwo, toggleMouseTwo] = React.useState(false);
+
     const toggleMouseMenu = () => {
         toggleMouse(!isMouse);
     };
+    const toggleMouseMenuTwo = () => {
+        toggleMouseTwo(!isMouseTwo);
+    };
     const subMenuAnimate = {
         enter: {
         opacity: 1,
@@ -46,8 +52,8 @@ function Navbar({setSearchOpen}) {
 
     // const pages = ['Home', 'About', 'How we work', 'Collaborate', 'Domains', 'Events', 'Blog', 'Contact'];
     // const pagePaths = ['home', 'about', 'how-we-work', 'collaborate', 'domains', 'events', 'blog', 'contact'];
-    const pages = ['Home', 'About', 'Collaborate', 'API Day', 'Postman Classroom Program', 'Domains', 'Events', 'Blog', 'Contact'];
-    const pagePaths = ['home', 'about', 'collaborate', 'api-day', 'postman-classroom-program', 'domains', 'events', 'blog', 'contact'];
+    const pages = ['Home', 'About', 'Collaborate', 'API Day', 'Postman Classroom Program', 'Domains', 'Events', 'Blog','People', 'Organisations', 'Contact'];
+    const pagePaths = ['home', 'about', 'collaborate', 'api-day', 'postman-classroom-program', 'domains', 'events', 'blog','people','organisations', 'contact'];
 
 
 
@@ -210,9 +216,49 @@ function Navbar({setSearchOpen}) {
                             <motion.div className={`underline ${top === true ? '' : 'hide'} `} layoutId="underline" />
                         }
                     </Link>
+                    {/* <Link to="/people" >
+
+                    </Link> */}
+                    <div className="dropdown">
+                        <motion.div
+                            className="menu-item"
+                            onMouseEnter={toggleMouseMenuTwo}
+                            onMouseLeave={toggleMouseMenuTwo}
+                        >
+                            <div className='openSourceArchive'>
+                                <GoTriangleDown className='triangle'/>
+                                <p className='dropbtn'>
+                                NITK Open Source Archive
+                                {
+                                active !== 9 ? null :
+                                <motion.div className={`underline ${top === true ? '' : 'hide'} `} layoutId="underline" />
+                                }
+                                {
+                                active !== 10 ? null :
+                                <motion.div className={`underline ${top === true ? '' : 'hide'} `} layoutId="underline" />
+                                }
+                                </p>
+
+                            </div>
+                                <motion.div
+                                className="sub-menu"
+                                initial="exit"
+                                animate={isMouseTwo ? "enter" : "exit"}
+                                variants={subMenuAnimate}
+                                >
+                                <div className="sub-menu-container">
+
+                                    <Link to="/people" state={{ goto: 1 }}>People</Link>
+
+                                    <Link to="/organisations" state={{ goto: 2 }}>Organisations</Link>
+
+                                </div>
+                            </motion.div>
+                        </motion.div>
+                    </div>
                     <Link to="/contact" >Contact
                         {
-                            active !== 9 ? null :
+                            active !== 11 ? null :
                             <motion.div className={`underline ${top === true ? '' : 'hide'} `} layoutId="underline" />
                         }
                     </Link>

src/Components/Navbar/Navbar.scss

@@ -26,7 +26,7 @@
     justify-content: space-between;
     align-items: center;
     transition: .4s;
-    max-width: 1200px;
+    max-width: 1300px;
     margin: auto;
 
     @media only screen and (max-width: 1200px) {
@@ -163,7 +163,21 @@
           .sub-menu-item {
             margin-bottom: 5px;
           }
-
+          .openSourceArchive{
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            cursor: default;
+            p{
+                margin-left: 5px;
+            }
+
+          }
+          .triangle{
+            color: $green;
+            scale: 1.0;
+            margin-left: 30px;
+          }
     }
     .sidebar {
         height: 100vh;
@@ -224,11 +238,12 @@
     height: 70px;
 }
 .transparent {
-    background-color: transparent;
+    // background-color: transparent;
+    background-color:  #0B0E1C;
 
-    &:hover {
-        background-color:  #0B0E1C;
-    }
+    // &:hover {
+    //     background-color:  #0B0E1C;
+    // }
 }
 .toTopIcon {
     position: fixed;
@@ -286,4 +301,5 @@
         margin-bottom: 0;
         transition: all 0.4s;
     }
-}
+}
+

src/Components/OrgCard/OrganisationCard.jsx

@@ -0,0 +1,53 @@
+import './OrganisationCard.scss';
+import filterByFilterKey from '../../Helper/filterByFilterKey';
+import def_image from '../../Assets/default_image.svg'
+import { Link } from 'react-router-dom';
+
+/**
+ * Renders an organisation card component.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.default_image] - The default image URL.
+ * @param {Object} props.organisation - The organisation data.
+ * @param {Object} props.filters - The filters to apply.
+ * @returns {JSX.Element|null} The rendered organisation card component or null if it doesn't match the filters.
+ */
+
+export default function OrganisationCard({
+    default_image = def_image,
+    organisation,
+    filters,
+}) {
+    /**
+     * Checks if the organisation matches all the filters.
+     *
+     * @param {Object} filters - The filters to apply.
+     * @returns {boolean} True if the organisation matches all the filters, false otherwise.
+     */
+
+    const matchesFilters = Object.entries(filters).every(([filter, values]) => {
+        if (!values.length) return true;
+        return filterByFilterKey(organisation, filter, values);
+    });
+
+    const slug = organisation.name.toLowerCase().replace(/ /g, '-');
+
+    return (
+        matchesFilters && (
+            <Link to={`/organisations/${slug}`} className="organisation-card">
+                <div className="organisation-card__image">
+                    <img src={organisation.image || default_image} alt="Organisation Image" />
+                </div>
+                <div className="organisation-card__details">
+                    <h3 className='org-name'>{organisation.name || 'Organisation Name'}</h3>
+                    <p className='org-tag'>{organisation.categories[0]}</p>
+                    <div className="tech-stack">
+                        {organisation.technology && organisation.technology.map((tech, index) => (
+                            <span key={index}>{tech}</span>
+                        ))}
+                    </div>
+                </div>
+            </Link>
+        ) 
+    );
+}