Gerald/13 upcoming events

components/departments/DepartmentFilter.tsx

@@ -0,0 +1,32 @@
+const DepartmentFilter = () => {
+    return (
+      <div className="absolute z-10 flex flex-col items-start">
+        <div className="ml-16 mt-10 max-w-sm rounded-lg bg-white shadow-lg">
+          <form className="mb-4 rounded bg-white px-8 pt-6 pb-8">
+              <h1 className="inter mb-3 text-lg font-bold text-[#004C98]">FILTER</h1>
+              <div className="mb-4">
+              <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                  By Month
+              </label>
+              <input className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none" id="username" type="text"/>
+              </div>
+              <div className="mb-4">
+              <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                  By Department
+              </label>
+              <input className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none" id="username" type="text"/>
+              </div>
+              <div>
+              <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                  By Event Type
+              </label>
+              <input className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none" id="username" type="text"/>
+              </div>
+          </form>
+        </div>
+      </div>
+    );
+  };
+
+  export default DepartmentFilter;
+

components/departments/FeaturedProjects.tsx

@@ -8,10 +8,11 @@ import { FaAngleDown } from 'react-icons/fa';
 // code
 import ProjectCard from '@components/departments/ProjectCard';
 import SectionHeader from '@components/layout/SectionHeader';
-import ProjectCarousel from '@components/departments/ProjectCarousel';
+import DepartmentFilter from '@components/departments/DepartmentFilter';
 
 const FeaturedProjects = ({ projects }: FeaturedProjectsProps) => {
   // eslint-disable-next-line no-unused-vars
+  const [active, setActive] = useState(false);
   const [year, setYear] = useState('21/22');
   const projectsByYear = projects.filter((project) => project.year === year);
   const projectArray = [];
@@ -20,27 +21,17 @@ const FeaturedProjects = ({ projects }: FeaturedProjectsProps) => {
     const chunk = projectsByYear.slice(i, i + chunkSize);
     projectArray[projectArray.length] = chunk;
   }
-
-  return (
+  return ( 
     <div className="sm:section-my mt-10">
       <SectionHeader
         color="green"
         title="Featured Projects"
         subtitle="Key Highlights"
       />
 
-      {/* Filter Button */}
-      <div className=" ml-4 mt-12 flex items-center">
-        <button
-          type="button"
-          className="flex items-center rounded-md bg-[#036167] py-2 px-4 text-white"
-        >
-          <span className="mr-2">FILTER</span>
-          <FaAngleDown />
-        </button>
-      </div>
-
-      {/* Mobile Carousel */}
+      <button type="submit" onClick={() => setActive(!active)} className="inter mt-10 ml-20 rounded bg-[#036167] py-2 px-4 text-base font-semibold text-white">ACADEMIC YEAR</button>
+      {active === true && <DepartmentFilter/>}
+      {/* Mobile */}
       <div className="mt-10 flex flex-wrap justify-center gap-10 md:mt-14 md:gap-16 lg:hidden">
         {projectsByYear.map(({ projectName, summary, projectImage }, index) => {
           return (

components/events/EventCard.tsx

@@ -31,7 +31,7 @@ const EventCard = ({
   const day = dateObj.getDate();
 
   return (
-    <div className="w-[330px] rounded-lg p-8 shadow-lg">
+    <div className="relative w-[330px] rounded-lg p-8 shadow-lg">
       <div className="text-h4 text-center font-bold">{name}</div>
       <div className="relative mt-2 flex justify-center">
         <Image

components/events/EventCardEdited.tsx

@@ -0,0 +1,23 @@
+// import { EventCardProps } from '@interfaces/events/EventCard';
+
+// library
+// import Link from 'next/link';
+
+const EventCardEdited = () => {
+  return (
+    <div className="inter relative h-[124px] w-[140px] gap-32 rounded-3xl bg-[#FFFFFF]/50 p-8 text-[#004C98] shadow-lg hover:-translate-y-1 sm:h-[318px] sm:w-[310px]">
+      <div className="flex justify-between">
+        <span className="text-xs sm:text-6xl">06</span>
+        <span className="mt-3 mr-24 flex flex-col text-sm font-medium">
+          <span>November</span>
+          <span className="flex-col">7:30 P.M.</span>
+        </span>
+      </div>
+      <h2 className="mt-1 font-bold sm:text-3xl">Event Name</h2>
+      <div className="h-30 mt-1 sm:text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto minima impedit tempora velit dicta nulla dignissimos exercitationem tenetur voluptatum illum suscipit</div>
+      <button type="button" className="mt-4 mb-2 w-full rounded-3xl border border-[#004C98] bg-transparent py-2 px-4 font-semibold hover:border-transparent hover:bg-[#004C98] hover:text-white hover:transition-all">Book Now</button>
+    </div>
+  );
+};
+
+export default EventCardEdited;

components/events/Filter.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import "react-datepicker/dist/react-datepicker.css";
+import { FaCalendarAlt } from 'react-icons/fa';
+
+const Filter = () => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  return (
+    <div className="absolute z-10 flex flex-col items-start lg:ml-40">
+      <div className="mt-10 max-w-sm rounded-lg bg-white shadow-lg mx-auto md:ml-0">
+        <form className="mb-4 rounded bg-white px-8 pt-6 pb-8">
+            <h1 className="inter mb-3 text-lg font-bold text-[#004C98]">FILTER</h1>
+            <div className="mb-4">
+            <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                By Month
+            </label>
+            <div className="relative">
+                <DatePicker 
+                  className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 pr-8 leading-tight shadow focus:outline-none" 
+                  selected={startDate} 
+                  onChange={(date: Date) => setStartDate(date)} />
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+                  <FaCalendarAlt className="text-gray-400" />
+                </div>
+              </div>
+            </div>
+            <div className="mb-4">
+            <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                By Department
+            </label>
+            <input className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none" id="username" type="text"/>
+            </div>
+            <div>
+            <label className="inter mb-2 block text-lg font-medium text-[#004C98]">
+                By Event Type
+            </label>
+            <input className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight shadow focus:outline-none" id="username" type="text"/>
+            </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Filter;