Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: content aligned in mobile view #407

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

fix: content aligned in mobile view #407

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f183488
Update ticketCards.js
Aryan4884 Oct 1, 2024
b143010
Update index.js
Aryan4884 Oct 1, 2024
2746411
Update city-lists.json
Aryan4884 Oct 1, 2024
ff1faf7
Add files via upload
Aryan4884 Oct 1, 2024
b4abd32
Update speakers.json
Aryan4884 Oct 1, 2024
e3ac492
Update dropdown.js
Aryan4884 Oct 2, 2024
da78663
Merge branch 'master' into fourth_issue
AceTheCreator Oct 9, 2024
26a4e4a
Merge branch 'master' into fourth_issue
Aryan4884 Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 75 additions & 75 deletions components/Dropdown/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div class='relative inline-block w-full' ref={dropdownRef}>
<div className='w-full'>
<button
type='button'
className='flex justify-between text-white p-4 w-full justify-center gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border rounded-md'
id='menu-button'
aria-expanded='true'
aria-haspopup='true'
onClick={() => setShow(!show)}
>
<div>{active}</div>
<svg
className='-mr-1 h-5 w-5 text-gray-400'
viewBox='0 0 20 20'
fill='currentColor'
aria-hidden='true'
>
<path
fill-rule='evenodd'
d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'
clip-rule='evenodd'
/>
</svg>
</button>
</div>
{/*
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 (
<div class="relative inline-block w-full" ref={dropdownRef}>
<div className="w-full">
<button
type="button"
className="flex justify-between text-white p-4 w-full justify-center gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border rounded-md"
id="menu-button"
aria-expanded="true"
aria-haspopup="true"
onClick={() => setShow(!show)}
>
<div className="flex-grow text-center">{active}</div>
<svg
className="-mr-1 h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
{/*
<!--
Dropdown menu, show/hide based on menu state.

Expand All @@ -52,39 +52,39 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
--> */}
{show && (
<div
className='w-full absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
role='menu'
aria-orientation='vertical'
aria-labelledby='menu-button'
tabindex='-1'
>
<div className='' role='none'>
{items &&
items.map((item) => {
return (
<div
key={item.city}
onClick={() => {
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}
</div>
);
})}
</div>
</div>
)}
</div>
);
{show && (
<div
className="w-full absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="menu-button"
tabindex="-1"
>
<div className="" role="none">
{items &&
items.map((item) => {
return (
<div
key={item.city}
onClick={() => {
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}
</div>
);
})}
</div>
</div>
)}
</div>
);
}

export default Dropdown;
49 changes: 32 additions & 17 deletions components/Tickets/ticketCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,47 @@
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 (
<div className={`w-[300px] lg:w-full ${cardOpacity} hoverEffect h-[400px] cursor-pointer flex flex-col text-white justify-between rounded-lg card bg-white ${className}`}>
<div className='p-4'>
<div className='text-xl font-bold text-gradient'>{city.name}, {city.country}</div>
<div className='mt-2 text-lg'>{city.date}</div>
<div
className={`w-[300px] lg:w-full ${cardOpacity} hoverEffect h-[400px] cursor-pointer flex flex-col text-white justify-between rounded-lg card bg-white ${className}`}
>
<div className="p-4">
<div className="text-xl font-bold text-gradient">
{city.name}, {city.country}
</div>
<div className="mt-2 text-lg">{city.date}</div>
<div className="mt-1 text-sm italic">{statusLabel}</div>
</div>
<div className='border-t h-20 border-dashed p-4 text-center'>
<div className="border-t h-20 border-dashed p-4 text-center">
{/* Show a button based on the event status */}
{isEndedOrUpcoming ? (
<Button disabled overlay={true} className='w-[200px] bg-gray-400'>
{city.ended ? 'Ended' : 'Coming soon'}
{isEnded ? (
<Button disabled overlay={true} className="w-[200px] bg-gray-400">
Ended
</Button>
) : isUpcoming ? (
<Button disabled overlay={true} className="w-[200px] bg-gray-400">
Coming Soon
</Button>
) : (
<a href={city.ticket} target='_blank' rel='noreferrer'>
<Button className='w-[200px]'>{buttonText}</Button>
<a href={city.ticket} target="_blank" rel="noreferrer">
<Button className="w-[200px]">{buttonText}</Button>
</a>
)}
</div>
</div>
);
}

export default TicketCards;
export default TicketCards;
57 changes: 30 additions & 27 deletions config/city-lists.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
[

{
"name": "Paris",
"country": "France",
"date": "December 3-5, 2024",
"cfpdate":"October 12, 2024",
"description": "Join us at apidays Paris for the AsyncAPI Conference and experience the art of API perfection! Let's craft a symphony of messaging and celebrate tech in style!",
"img": "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd24yenR4djEyZzRoeDA0ZmEyb3Y1c2F4NWVmbG13NmZwYWNhZzdnNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Tuy3QxNZF1cxG/giphy.gif",
"address": "CNIT (Centre des Nouvelles Industries et Technologies), Paris 2 Place de la Défense, 92092 Puteaux",
"map": "https://maps.app.goo.gl/5te8WRM9Rb8B6vNd9",
"sponsors": [
"/img/apidays.png"
],
"ticket": false,
"isFree": true,
"ended": false,
"cfp": "https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx"
},
{
"name": "Online",
"country": " Edition",
Expand All @@ -16,22 +34,7 @@
"ended": true

},
{
"name": "Helsinki",
"country": "Finland",
"date": "May 29 2024",
"cfpdate":"Not announced yet",
"description": "Join us in Helsinki for the AsyncAPI Conference, where we will explore all things AsyncAPI and connect physical and digital worlds. Get excited as we delve into sustainable APIs for the Era of AI, Data Platforms, and Quantum Computing!.",
"img": "/img/finland.webp",
"address": "Pikku-Finlandia, Helsinki, Karamzininranta 4, 00100 Helsinki, Finland",
"map": "https://maps.app.goo.gl/UpdEp188m5YNEAEo9",
"sponsors": [
"/img/apidays.png"
],
"ticket": false,
"isFree": false,
"ended": true
},

{
"name": "London",
"country": "UK",
Expand All @@ -49,20 +52,20 @@
"ended": true
},
{
"name": "Paris",
"country": "France",
"date": "December 3-5, 2024",
"cfpdate":"October 12, 2024",
"description": "Join us at apidays Paris for the AsyncAPI Conference and experience the art of API perfection! Let's craft a symphony of messaging and celebrate tech in style!",
"img": "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd24yenR4djEyZzRoeDA0ZmEyb3Y1c2F4NWVmbG13NmZwYWNhZzdnNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Tuy3QxNZF1cxG/giphy.gif",
"address": "CNIT (Centre des Nouvelles Industries et Technologies), Paris 2 Place de la Défense, 92092 Puteaux",
"map": "https://maps.app.goo.gl/5te8WRM9Rb8B6vNd9",
"name": "Helsinki",
"country": "Finland",
"date": "May 29 2024",
"cfpdate":"Not announced yet",
"description": "Join us in Helsinki for the AsyncAPI Conference, where we will explore all things AsyncAPI and connect physical and digital worlds. Get excited as we delve into sustainable APIs for the Era of AI, Data Platforms, and Quantum Computing!.",
"img": "/img/finland.webp",
"address": "Pikku-Finlandia, Helsinki, Karamzininranta 4, 00100 Helsinki, Finland",
"map": "https://maps.app.goo.gl/UpdEp188m5YNEAEo9",
"sponsors": [
"/img/apidays.png"
],
"ticket": false,
"isFree": true,
"ended": false,
"cfp": "https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx"
"isFree": false,
"ended": true
}

]
24 changes: 12 additions & 12 deletions config/speakers.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,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"
}
]
},
Expand Down Expand Up @@ -113,17 +113,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 ",
Expand All @@ -133,32 +133,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"
}]
},
{
Expand Down
Loading
Loading