feat: event location (#5424)

* feat: location to events (#4438)

* Added the Location parameters

* Updated docs with Location parameters

* Updated the Location parameter

* Updated location docs

* Updated the location parameters

---------

Co-authored-by: Eddie Jaoude <[email protected]>

* feat: event location

---------

Co-authored-by: Deb Chatterjee <[email protected]>

Author: eddiejaoude

components/event/EventCard.js

@@ -1,12 +1,12 @@
-import Link from "../Link";
-import { FaMicrophoneAlt } from "react-icons/fa";
+import { FaMicrophoneAlt, FaMapPin } from "react-icons/fa";
 import {
   MdOutlineOnlinePrediction,
   MdOutlinePeople,
   MdOutlineArrowRightAlt,
 } from "react-icons/md";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 
+import Link from "../Link";
 import FallbackImage from "../FallbackImage";
 
 export default function EventCard({ event, username }) {
@@ -76,6 +76,21 @@ export default function EventCard({ event, username }) {
               <ReactMarkdown className="text-sm text-gray-500 py-1 flex-wrap">
                 {event.description}
               </ReactMarkdown>
+              <p className="text-sm text-gray-800 py-1 flex gap-2 flex-wrap">
+                {(event.isVirtual || (event.isInPerson && event.location)) && (
+                  <FaMapPin />
+                )}
+                <span>
+                  {event.isVirtual && "Remote"}
+                  {event.isVirtual &&
+                    event.isInPerson &&
+                    event.location &&
+                    " AND in "}
+                  {event.isInPerson &&
+                    event.location &&
+                    Object.values(event.location).join(", ")}
+                </span>
+              </p>
             </div>
             {username && (
               <Link

data/eddiejaoude/events/2023-07-27-wearedevelopers.json

@@ -7,5 +7,9 @@
     "start": "2023-07-27T09:00:00.000+00:00",
     "end": "2023-07-28T17:00:00.000+00:00"
   },
+  "location": {
+    "city": "Berlin",
+    "country": "Germany"
+  },
   "url": "https://www.wearedevelopers.com/world-congress"
 }

data/eddiejaoude/events/2023-09-18-talk-infobip.json

@@ -11,5 +11,8 @@
     "end": "2023-09-19T18:00:00.000+00:00",
     "cfpClose": "2023-05-15T18:00:00.000+00:00"
   },
+  "location": {
+    "country": "Croatia"
+  },
   "url": "https://shift.infobip.com"
 }

pages/docs/how-to-guides/events.mdx

@@ -20,13 +20,11 @@ All future events also appear on the Events page for the app.
 
 _If you need help on how to edit this file, please see the <Link href="/docs/how-to-guides/editing">Editing Guide</Link>_
 
-3. This `json` file will contain one object for the event and must have six fields, `isVirtual` and/or `isInPerson`, `color`, `name`, `description`, `date` and `url`, which will look like this:
+3. This `json` file will contain one object for the event and must have six fields, `isVirtual` and/or `isInPerson`, `color`, `name`, `description`, `date`, `url`, and `location`, which will look like this:
 
 <ClipboardCopy>
 ```js
 {
-  "userStatus": "speaking",
-  "speakerDetails": "Cloud Computing with Spring Cloud",
   "isVirtual": true,
   "isInPerson": true,
   "color": "red",
@@ -37,22 +35,30 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
     "end": "2022-12-09T17:00:00.000+00:00",
     "cfpClose": "2022-10-09T17:00:00.000+00:00"
   },
-  "url": "https://www.youtube.com/watch?v=iqIFD02OkVE"
+  "url": "https://www.youtube.com/watch?v=iqIFD02OkVE",
+  "location": {
+    "road": "Messe Berlin South Entrance & CityCube",
+    "city": "Jafféstrasse",
+    "state": "Berlin",
+    "country": "Germany"
+  }
 }
 ```
 </ClipboardCopy>
 
 | Property               | Required | Description                                                 |
 | :--------------------- | :------- | :---------------------------------------------------------- |
-| userStatus             | false    | Is user `attending` or `speaking`                           |
-| speakerDetails         | false    | Topic of your talk at the event                             |
 | isVirtual / isInPerson | true     | Is the event virtual or in person or both                   |
 | color                  | true     | What color would you like this milestone to be displayed in |
 | name                   | true     | Name of the event                                           |
 | description            | true     | More details about the event, this can include markdown     |
 | date                   | true     | Start and end date plus time of the event                   |
 | cfpClose               | false    | The date of when the CFP to submit a talk closes            |
 | url                    | true     | Where can people learn more about the event                 |
+| road                   | false    | In which road, the event is hosting                         |
+| city                   | false    | In which city, the event is hosting                         |
+| state                  | false    | In which state, the event is hosting                        |
+| country                | false    | In which country, the event is hosting                      |
 
 4. Now you can commit your file and create a Pull Request. For more details please see <Link href="/docs/how-to-guides/editing">Editing Guide</Link>