Event filters

components/event/EventKey.js

@@ -1,12 +1,16 @@
 import { IconContext } from "react-icons";
 import { MdOutlineOnlinePrediction, MdOutlinePeople } from "react-icons/md";
 
-export default function EventKey({ events }) {
-  const inPersonEvents = events.filter(event => event.isInPerson).length;
-  const virtualEvents = events.filter(event => event.isVirtual).length;
+export default function EventKey({ events, onToggleEventType }) {
+  const inPersonEvents = events.filter((event) => event.isInPerson).length;
+  const virtualEvents = events.filter((event) => event.isVirtual).length;
+
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-6">
-      <div className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
+      <div
+        onClick={() => onToggleEventType("in-person")}
+        className="hover:scale-105 cursor-pointer transition-all 3s relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+      >
         <div className="flex-shrink-0">
           <IconContext.Provider value={{ size: "3em" }}>
             <MdOutlinePeople />
@@ -21,7 +25,10 @@ export default function EventKey({ events }) {
         </div>
         <div className="text-2xl font-semibold">{inPersonEvents}</div>
       </div>
-      <div className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
+      <div
+        onClick={() => onToggleEventType("virtual")}
+        className="hover:scale-105 cursor-pointer transition-all 3s relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+      >
         <div className="flex-shrink-0">
           <IconContext.Provider value={{ size: "3em" }}>
             <MdOutlineOnlinePrediction />

components/user/UserEvents.js

@@ -9,9 +9,10 @@ export default function UserEvents({ data }) {
       {!data.events && <Alert type="info" message="No events found" />}
       <ul role="list" className="divide-y divide-gray-200">
         {data.events &&
-          data.events.map((event, index) => (
-            <EventCard event={event} key={index} />
-          ))}
+          data.events
+            .map((event, index) => (
+              <EventCard event={event} key={index} />
+            ))}
       </ul>
     </div>
   );

data/juliafmorgado/events/2023-02-07-civo-navigate.json

@@ -1,11 +1,11 @@
 {
-    "isInPerson": true,
-    "color": "red",
-    "name": "CIVO Navigate",
-    "description": "A two-day conference in **Tampa, FL**, revolving around topics such as **Kubernetes**, **Edge Computing**, **Machine Learning**, **Dev/GitOps**, **Observability**, **Security**, and **Cloud Native Transformation**, where I will be delivering a workshop on Open Source developer tool **Acorn**.",
-    "date": {
-        "start": "2023-02-07T08:30:00.000-05:00",
-        "end": "2023-02-08T17:40:00.000-05:00"
-    },
-    "url": "https://civo.com/navigate" 
+  "isInPerson": true,
+  "color": "red",
+  "name": "CIVO Navigate",
+  "description": "A two-day conference in **Tampa, FL**, revolving around topics such as **Kubernetes**, **Edge Computing**, **Machine Learning**, **Dev/GitOps**, **Observability**, **Security**, and **Cloud Native Transformation**, where I will be delivering a workshop on Open Source developer tool **Acorn**.",
+  "date": {
+    "start": "2023-02-07T08:30:00.000-05:00",
+    "end": "2023-02-08T17:40:00.000-05:00"
+  },
+  "url": "https://civo.com/navigate"
 }