diff --git a/components/Dropdown/dropdown.js b/components/Dropdown/dropdown.js index a412d1b3..081b3c90 100644 --- a/components/Dropdown/dropdown.js +++ b/components/Dropdown/dropdown.js @@ -1,47 +1,47 @@ -import React, {useState,useRef,useEffect} from 'react'; +import React, { useState, useRef, useEffect } from "react"; function Dropdown({ active, items, setOptions, setOptions2 }) { - const [show, setShow] = useState(false) - const dropdownRef = useRef(null); - useEffect(() => { - // This checks if the click event occurred outside the dropdown, if true we closes the dropdown. - function handleClickOutside(event) { - if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { - setShow(false); - } - } - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [dropdownRef]); - return ( -
-
- -
- {/* + const [show, setShow] = useState(false); + const dropdownRef = useRef(null); + useEffect(() => { + // This checks if the click event occurred outside the dropdown, if true we closes the dropdown. + function handleClickOutside(event) { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setShow(false); + } + } + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [dropdownRef]); + return ( +
+
+ +
+ {/* */} - {show && ( -
-
- {items && - items.map((item) => { - return ( -
{ - setOptions(item); - setOptions2(item.lists); - setShow(false); - }} - className={`text-gray-700 block p-4 text-md hover:text-white cursor-pointer navbg`} - role='menuitem' - tabindex='-1' - id='menu-item-0' - > - {item.city} -
- ); - })} -
-
- )} -
- ); + {show && ( +
+
+ {items && + items.map((item) => { + return ( +
{ + setOptions(item); + setOptions2(item.lists); + setShow(false); + }} + className={`text-gray-700 block p-4 text-md hover:text-white cursor-pointer navbg`} + role="menuitem" + tabindex="-1" + id="menu-item-0" + > + {item.city} +
+ ); + })} +
+
+ )} +
+ ); } export default Dropdown; diff --git a/components/Tickets/ticketCards.js b/components/Tickets/ticketCards.js index 3e67fe17..eb5e2528 100644 --- a/components/Tickets/ticketCards.js +++ b/components/Tickets/ticketCards.js @@ -1,27 +1,42 @@ -import React from 'react'; -import Button from '../Buttons/button'; +import React from "react"; +import Button from "../Buttons/button"; function TicketCards({ className, city }) { - // Determine card style based on event status - const isEndedOrUpcoming = city.ended || !city.ticket; - const cardOpacity = isEndedOrUpcoming ? 'opacity-40' : 'opacity-100'; - const buttonText = city.isFree ? 'Get Your Ticket' : 'Buy Now'; + // Determine card style and status based on event status + const isEnded = city.ended; + const isUpcoming = !city.ticket; + const cardOpacity = isEnded ? "opacity-60" : "opacity-100"; + const buttonText = city.isFree ? "Get Your Ticket" : "Buy Now"; + const statusLabel = isEnded + ? "Ended" + : isUpcoming + ? "Coming Soon" + : "Available"; return ( -
-
-
{city.name}, {city.country}
-
{city.date}
+
+
+
+ {city.name}, {city.country} +
+
{city.date}
+
{statusLabel}
-
+
{/* Show a button based on the event status */} - {isEndedOrUpcoming ? ( - + ) : isUpcoming ? ( + ) : ( - - + + )}
@@ -29,4 +44,4 @@ function TicketCards({ className, city }) { ); } -export default TicketCards; \ No newline at end of file +export default TicketCards; diff --git a/config/speakers.json b/config/speakers.json index 798c879e..b0b3a438 100644 --- a/config/speakers.json +++ b/config/speakers.json @@ -37,17 +37,17 @@ { "name": "Hugo Guerrero", "title": "Developer Advocate at Redhat", - "img": "https://avatars.githubusercontent.com/u/1001939?v=4" + "img": "/img/Hugo Guerrero.jpeg" }, { "name": "Jonas Lagoni", "title": "Lead Software Engineer at Postman", - "img": "https://pbs.twimg.com/profile_images/1507770710789402630/w4IZfLUZ_400x400.jpg" + "img": "/img/Jonas Lagoni.jpg" }, { "name": "Lukasz Gornicki", "title": "Executive Director at AsyncAPI Initiative and Developer Relations Manager at Postman", - "img": "https://pbs.twimg.com/profile_images/1683523954957328393/W009Rxsj_400x400.jpg" + "img": "/img/Lukasz Gornicki.jpg" } ] }, @@ -112,17 +112,17 @@ "lists": [ { "name": "Dale Lane", "title": "Chief Architect at IBM", - "img": "https://user-images.githubusercontent.com/66913810/261602797-91ddd137-f71b-4486-84bf-de98ac58e839.png" + "img": "/img/Dale Lane.png" }, { "name": "Lorna Mitchell", "title": "VP of Developer Experience at Redocly", - "img": "https://lornajane.net/wp-content/uploads/2011/08/IMG_9410-smaller.jpg" + "img": "/img/Lorna Mitchell.jpg" }, { "name": "Artur Ciocanu", "title": "Senior Computer Scientist at Adobe", - "img": "https://user-images.githubusercontent.com/66913810/262294782-32d6cf14-3e7b-4b68-b8a6-82de97166c7d.jpg" + "img": "/img/Artur Ciocanu.jpg" }, { "name": "Eduardo Maldonado Fonseca Silva ", @@ -132,32 +132,32 @@ { "name": "Laurent Broudoux", "title": "Co-founder of Microcks", - "img": "https://user-images.githubusercontent.com/66913810/279639901-07c64c42-deee-4520-b36f-92a8141b9dcb.jpg" + "img": "/img/Laurent Broudoux.jpg" }, { "name": "Sho Kaneko", "title": "Founder of Repoch", - "img": "https://pbs.twimg.com/profile_images/1680155599227502594/14ASdMcD_400x400.jpg" + "img":"/img/Sho Kaneko.jpg" }, { "name": "Thulisile Sibanda", "title": "Community Manager at AsyncAPI Initiative", - "img": "https://apidays.s3.fr-par.scw.cloud/medias/2964/3f41ea5b-34ea-496e-a0f0-c17296d1d032.jpg" + "img": "/img/Thulisile Sibanda.jpg" }, { "name": "James Gough", "title": "Distinguished Engineer at Morgan Stanley", - "img": "https://apidays.s3.fr-par.scw.cloud/medias/2201/conversions/6d4f5dcd-52e6-41f8-8862-7ca096bb6b47-square.jpg" + "img": "/img/James Gough.jpg" }, { "name": "Will Osbourne", "title": "Technology Associate at Morgan Stanley", - "img": "https://apidays.s3.fr-par.scw.cloud/medias/2990/conversions/dc3950b7-fa4a-4d89-b930-8e62bc883b6f-square.jpg" + "img": "/img/Will Osbourne.jpg" }, { "name": "Swen-Helge Huber", "title": "Senior Director, Office of the CTO at Solace", - "img": "https://user-images.githubusercontent.com/66913810/262295277-4cab51aa-e336-4f13-9e63-6eea20ad411a.png" + "img":"/img/Swen-Helge Huber.png" }] }, { diff --git a/pages/index.js b/pages/index.js index fd024269..43e5a198 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,197 +1,235 @@ /* eslint-disable @next/next/no-img-element */ /* eslint-disable react/no-unescaped-entities */ -import { useEffect, useState } from 'react'; -import Head from 'next/head'; -import { useMediaQuery } from 'react-responsive'; -import Header from '../components/Header/header'; -import cities from '../config/city-lists.json'; -import Sponsors from '../components/Sponsors/sponsors'; -import About from '../components/About/about'; -import TicketCards from '../components/Tickets/ticketCards'; -import Heading from '../components/Typography/heading'; -import Paragraph from '../components/Typography/paragraph'; -import Subscription from '../components/Form/subscription'; -import Speaker from '../components/Speaker/speaker'; -import speakers from '../config/speakers.json'; -import Link from 'next/link'; -import Button from '../components/Buttons/button'; -import Dropdown from '../components/Dropdown/dropdown'; +import { useEffect, useState } from "react"; +import Head from "next/head"; +import { useMediaQuery } from "react-responsive"; +import Header from "../components/Header/header"; +import cities from "../config/city-lists.json"; +import Sponsors from "../components/Sponsors/sponsors"; +import About from "../components/About/about"; +import TicketCards from "../components/Tickets/ticketCards"; +import Heading from "../components/Typography/heading"; +import Paragraph from "../components/Typography/paragraph"; +import Subscription from "../components/Form/subscription"; +import Speaker from "../components/Speaker/speaker"; +import speakers from "../config/speakers.json"; +import Link from "next/link"; +import Button from "../components/Buttons/button"; +import Dropdown from "../components/Dropdown/dropdown"; export default function Home() { - const isTablet = useMediaQuery({ maxWidth: '1118px' }); - const [speakersList, setSpeakersList] = useState([]); - const [city, setCity] = useState(""); - speakers[0].lists = []; - speakers.map((speaker) => { - if (Array.isArray(speaker.lists) && Object.keys(speaker.lists).length > 0) { - speakers[0].lists.push(...speaker.lists); - } - }); - const list = speakers[0].lists.filter((obj, index) => { - return index === speakers[0].lists.findIndex(o => obj.name=== o.name); - }); - speakers[0].lists =[...list]; - - useEffect(() => { - setCity(speakers[0]); - setSpeakersList(speakers[0].lists); - },[]); - return ( -
- - AsyncAPI Conference - - - - background-illustration -
-
- -
-
-
-
-
-
-
-
Speakers
-
-
- - Meet The Speakers - -
- - Discover the inspiring voices shaping our event, each bringing unique insights and expertise to the forefront of their respective fields. - -
-
-
- {isTablet ? ( -
- -
- ) : ( -
-
- {speakers.map((speaker) => { - return ( -
{ - setCity(speaker); - setSpeakersList(speaker.lists); - }} - > - -
- ); - })} -
-
- )} -
+ const isTablet = useMediaQuery({ maxWidth: "1118px" }); + const [speakersList, setSpeakersList] = useState([]); + const [city, setCity] = useState(""); + speakers[0].lists = []; + speakers.map((speaker) => { + if (Array.isArray(speaker.lists) && Object.keys(speaker.lists).length > 0) { + speakers[0].lists.push(...speaker.lists); + } + }); + const list = speakers[0].lists.filter((obj, index) => { + return index === speakers[0].lists.findIndex((o) => obj.name === o.name); + }); + speakers[0].lists = [...list]; -
- {typeof speakersList === 'string' ? ( -
-
- - {city.city} Speakers To Be Announced Soon - Stay Tuned! - -
-
- ) : Object.keys(speakersList).length > 0 ? ( -
- {speakersList.map((speaker, i) => { - return ( - - ); - })} -
- ) : ( -
-
- - {city.city} Speakers Coming Soon - Stay Tuned! - - - We are actively accepting speaker applications, and you - can start your journey by clicking the button below. Join - us on stage and share your valuable insights with our - enthusiastic audience! - - - - - - -
-
- )} -
-
-
-
-
-
Tickets
-
- - Get Tickets - -
- - Experience the Future of Asynchronous Communication: Get Tickets for the AsyncAPI Conference on Tour! - -
-
- {cities.map((city) => { - if(city.ended === false){ - return - } - })} -
-
-
-
- -
-
- -
-
- ); -} \ No newline at end of file + useEffect(() => { + setCity(speakers[0]); + setSpeakersList(speakers[0].lists); + }, []); + + // Split cities into upcoming and past events + const upcomingCities = cities.filter((city) => !city.ended); + const pastCities = cities.filter((city) => city.ended); + + return ( +
+ + AsyncAPI Conference + + + + background-illustration +
+
+ +
+
+
+
+
+
+
+
+ Speakers +
+
+
+ + Meet The Speakers + +
+ + Discover the inspiring voices shaping our event, each bringing + unique insights and expertise to the forefront of their + respective fields. + +
+
+
+ {isTablet ? ( +
+ +
+ ) : ( +
+
+ {speakers.map((speaker) => { + return ( +
{ + setCity(speaker); + setSpeakersList(speaker.lists); + }} + > + +
+ ); + })} +
+
+ )} +
+ +
+ {typeof speakersList === "string" ? ( +
+
+ + {city.city} Speakers To Be Announced Soon - Stay Tuned! + +
+
+ ) : Object.keys(speakersList).length > 0 ? ( +
+ {speakersList.map((speaker, i) => { + return ( + + ); + })} +
+ ) : ( +
+
+ + {city.city} Speakers Coming Soon - Stay Tuned! + + + We are actively accepting speaker applications, and you + can start your journey by clicking the button below. + Join us on stage and share your valuable insights with + our enthusiastic audience! + + + + + + +
+
+ )} +
+
+
+
+
+
+ Tickets +
+
+ + Get Tickets + +
+ + Experience the Future of Asynchronous Communication: Get Tickets + for the AsyncAPI Conference on Tour! + +
+ {/* Upcoming Events */} +
+ {upcomingCities.map((city) => ( + + ))} +
+ +
+ {pastCities.map((city) => ( + + ))} +
+
+
+
+ +
+
+ +
+
+ ); +} diff --git a/public/img/Artur Ciocanu.jpg b/public/img/Artur Ciocanu.jpg new file mode 100644 index 00000000..f54ff6ac Binary files /dev/null and b/public/img/Artur Ciocanu.jpg differ diff --git a/public/img/Dale Lane.png b/public/img/Dale Lane.png new file mode 100644 index 00000000..ba68fbda Binary files /dev/null and b/public/img/Dale Lane.png differ diff --git a/public/img/Hugo Guerrero.jpeg b/public/img/Hugo Guerrero.jpeg new file mode 100644 index 00000000..bea97270 Binary files /dev/null and b/public/img/Hugo Guerrero.jpeg differ diff --git a/public/img/James Gough.jpg b/public/img/James Gough.jpg new file mode 100644 index 00000000..4c2d2c89 Binary files /dev/null and b/public/img/James Gough.jpg differ diff --git a/public/img/Jonas Lagoni.jpg b/public/img/Jonas Lagoni.jpg new file mode 100644 index 00000000..1a0f9d43 Binary files /dev/null and b/public/img/Jonas Lagoni.jpg differ diff --git a/public/img/Laurent Broudoux.jpg b/public/img/Laurent Broudoux.jpg new file mode 100644 index 00000000..f2cf0b71 Binary files /dev/null and b/public/img/Laurent Broudoux.jpg differ diff --git a/public/img/Lorna Mitchell.jpg b/public/img/Lorna Mitchell.jpg new file mode 100644 index 00000000..da3bd31f Binary files /dev/null and b/public/img/Lorna Mitchell.jpg differ diff --git a/public/img/Lukasz Gornicki.jpg b/public/img/Lukasz Gornicki.jpg new file mode 100644 index 00000000..3840c25c Binary files /dev/null and b/public/img/Lukasz Gornicki.jpg differ diff --git a/public/img/Sho Kaneko.jpg b/public/img/Sho Kaneko.jpg new file mode 100644 index 00000000..bc6718b3 Binary files /dev/null and b/public/img/Sho Kaneko.jpg differ diff --git a/public/img/Swen-Helge Huber.png b/public/img/Swen-Helge Huber.png new file mode 100644 index 00000000..a15fbc6a Binary files /dev/null and b/public/img/Swen-Helge Huber.png differ diff --git a/public/img/Thulisile Sibanda.jpg b/public/img/Thulisile Sibanda.jpg new file mode 100644 index 00000000..dce8049c Binary files /dev/null and b/public/img/Thulisile Sibanda.jpg differ diff --git a/public/img/Will Osbourne.jpg b/public/img/Will Osbourne.jpg new file mode 100644 index 00000000..22c34458 Binary files /dev/null and b/public/img/Will Osbourne.jpg differ