Skip to content

Commit

Permalink
feat: add agenda component (#180)
Browse files Browse the repository at this point in the history 
* fix speakers image resolution

* implemented agenda page for london edition

* fixed overlap text

* minor fix

* fixed ordering error
  • Loading branch information
@AceTheCreator
AceTheCreator authored Sep 4, 2023
1 parent 4e687b0 commit 92a2378
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 11 deletions.
57 changes: 50 additions & 7 deletions components/Agenda/agenda.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,63 @@ import React from 'react'
import Heading from '../Typography/heading'
import Paragraph from '../Typography/paragraph'

function Agenda() {
function Agenda({ city }) {
console.log(city)
return (
<div className='container flex flex-col justify-center items-center'>
<Heading className='text-[30px] text-white'>
<div className=''>
<div className='flex flex-col justify-center items-center'>
<Heading className='text-[30px] text-white'>
Agenda
</Heading>
<Paragraph className='mt-[16px]'>
<Paragraph className='mt-[16px] text-center'>
The conference will commence at 8:00am BST (UTC+1)
</Paragraph>
<div className='w-[720px] lg:w-full mt-[140px] text-center'>
</Paragraph>
{!city.agenda && <div className='w-[720px] lg:w-full mt-[140px] text-center'>
<Heading typeStyle='lg' className='text-white text-[30px]'>
Agendas Coming Soon - Stay Tuned!
</Heading>
</div>
</div>}
</div>
{city.agenda && <div className='mt-[40px]'>
<Heading
typeStyle='heading-md'
className='countdown-text-gradient text-2xl'
level='h3'>
{city.date}
</Heading>
<div className='mt-[40px]'>
{city.agenda.map((talk) => {
return <div key={talk.session} className={`flex sm:flex-col justify-between mt-[50px] ${!talk.speaker && 'countdown-text-gradient'}`}>
<Paragraph typeStyle='body-md'>
{talk.time}
</Paragraph>
<div className='flex justify-between lg:flex-col w-[75%] lg:w-full'>
<div className='w-[50%] lg:w-full'>
<Paragraph typeStyle='body-sm' className=''>
{talk.type}
</Paragraph>
<Heading level='h3' typeStyle='heading-md-semibold' className='mt-[23px] text-white text-[20px] sm:text-[18px]'>
{talk.session}
</Heading>
</div>
{talk.speaker && typeof talk.speaker === 'number' ? <div className='flex items-center lg:mt-4'>
<div className='w-[94px] h-[94px]'>
<img src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full w-full h-full'/>
</div>
<div className='ml-4 w-[300px] sm:w-[250px]'>
<Heading typeStyle='heading-sm-semibold' className='text-white'>
{city.speakers[talk.speaker-1].name}
</Heading>
<Paragraph typeStyle='body-sm' className="mt-2">
{city.speakers[talk.speaker-1].title}
</Paragraph>
</div>
</div> : <div></div>}
</div>
</div>
})}
</div>
</div>}
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions components/Speaker/speaker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import React from 'react'
function Speaker({details, location, className}) {
return (
<div
className={`w-auto text-center card-bg h-auto rounded-md p-[27px] ${className}`}
className={`w-auto text-center flex flex-col items-center card-bg h-auto rounded-md p-[27px] ${className}`}
>
<div className=''>
<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
<img
src={details.img}
alt={details.name}
className='rounded-[200px] h-[356px] w-[356px] object-cover'
className='rounded-full w-full h-full object-cover'
/>
</div>
<div className='mt-[19px]'>
Expand Down
96 changes: 96 additions & 0 deletions config/speakers.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,102 @@
{
"location": "London, United Kingdom",
"city": "London",
"agenda": [
{
"time": "9:00 AM BST - 10:00 AM BST",
"type": "Registration + Breakfast"
},
{
"time": "10:00 AM BST - 10:30 AM BST",
"session": "Everything You Wish To Know About The AsyncAPI Community",
"speaker": 10,
"type": "Keynote Speaker"
},
{
"time": "10:30 AM BST - 11:00 AM BST",
"session": "Simplifying The Message-Based API Ecosystem Using Async API",
"speaker": 12,
"type": "Technical Talk"
},
{
"time": "11:00 AM BST - 11:30 AM BST",
"session": "Open Standards For Building Event-Driven Applications In The Cloud",
"speaker": 5,
"type": "Technical Talk"
},
{
"time": "11:30 AM BST - 12:00 PM BST",
"session": "AsyncAPI Standards And Governance",
"speaker": 6,
"type": "Keynote Speaker"
},
{
"time": "12:00 PM BST - 12:30 PM BST",
"session": "Event & Unified API Management - Self-Service Access To Events Using AsyncAPI",
"speaker": 8,
"type": "Keynote Speaker"
},
{
"time": "12:30 PM BST - 1:30 PM BST",
"session": "",
"type": "Break"
},
{
"time": "1:30 PM BST - 2:00 PM BST",
"session": "Full-Stack AsyncAPI",
"speaker": 4,
"type": "Technical Talk"
},
{
"time": "2:00 PM BST - 2:30 PM BST",
"session": "AsyncAPI and The Battles It Must Win",
"speaker": 9,
"type": "Keynote Speaker"
},
{
"time": "2:30 PM BST - 3:00 PM BST",
"session": "API Management For An Asynchronous World",
"speaker": 1,
"type": "Technical Talk"
},
{
"time": "3:00 PM BST - 3:20 PM BST",
"session": "",
"type": "Break"
},
{
"time": "3:20 PM BST - 3:50 PM BST",
"session": "AsyncAPI v3: Unleashing the Power of Asynchronous APIs Design",
"speaker": 3,
"type": "Keynote Speaker"
},
{
"time": "3:50 PM BST - 4:25 PM BST",
"session": "Navigating AsyncAPI Design with APIOps Cycles: A Practical Approach to Collaborative Planning",
"speaker": 2,
"type": "Technical Talk"
},
{
"time": "4:25 PM BST - 4:55 PM BST",
"session": "AsyncAPI and Modelina: Enforce Contracts And Reduce Boilerplate",
"speaker": 7,
"type": "Technical Talk"
},
{
"time": "4:55 PM BST - 5:30 PM BST",
"session": "Bridging the Gap between Design and Runtime in EDA with AsyncAPI and CI/CD",
"speaker": 11,
"type": "Technical Talk"
},
{
"time": "5:30 PM BST - 5:35 PM BST",
"session": "Inside-out or Outside-in",
"speaker": 1,
"type": "Keynote Speaker"
}


],
"lists": [

{
Expand Down
3 changes: 2 additions & 1 deletion pages/venue/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export async function getStaticProps({ params }) {
res = data[0];
const getSpeakers = speakers.filter((s) => s.city === res?.name);
res.speakers = getSpeakers[0].lists;
res.agenda = getSpeakers[0].agenda || null;
return {
props: {
city: res,
Expand Down Expand Up @@ -105,7 +106,7 @@ function Venue({ city }) {
className='border border border-x-0 border-b-0 border-t-[#333] py-28 container flex flex-col justify-center items-center '
>
<div className='w-[1130px] lg:w-full'>
<Agenda />
<Agenda city={city} />
</div>
</div>
<div
Expand Down

0 comments on commit 92a2378

Please sign in to comment.