ourworld_web/www_ourverse_new
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add event page

Browse Source
This commit is contained in:
sasha-astiadi
2024-10-08 14:06:45 +02:00
parent 4d6c697f35
commit 4cf78f4f17
55 changed files with 403 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/Eventpage1.jsx Normal file
View File

@@ -0,0 +1,141 @@
import { CheckIcon } from '@heroicons/react/20/solid'
const events = [
{
name: 'VerseFest 2024',
date: 'Nov 21-24',
location: 'OurWorld Verse',
languages: ['ENG', 'ARABIC'],
signupLink: 'https://ourverse.tf/events/versefest.html',
},
{
name: 'Freelance Fest 2024',
date: 'Oct 23-24',
location: 'OurWorld Verse',
languages: ['ARABIC'],
signupLink: 'https://ourverse.tf/events/versefest.html',
},
// More events can be added here...
]
// A function to return small flag icons for the specified languages
const languageIcons = {
ENG: '🇬🇧', // English flag icon (Union Jack)
ARABIC: '🇦🇪', // Arabic flag icon (UAE as an example)
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Eventpage1() {
return (
<div className="relative bg-white pt-8 pb-24">
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
<h2 className="text-intro">Events</h2>
<p className="mt-2 h3-title">
Get Involved
</p>
<p className="mx-auto mt-4 max-w-prose section-text font-display">
Join the latest events from OurVerse community.
</p>
</div>
<div className="px-4 sm:px-6 mt-12 lg:px-8 max-w-6xl mx-auto">
<div className="mt-8 flow-root">
<div className="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle">
<table className="min-w-full border-separate border-spacing-0">
<thead>
<tr>
<th
scope="col"
className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-4 pr-3 text-left section-text backdrop-blur backdrop-filter sm:pl-6 lg:pl-8"
>
Event
</th>
<th
scope="col"
className="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text backdrop-blur backdrop-filter sm:table-cell"
>
Date
</th>
<th
scope="col"
className="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text backdrop-blur backdrop-filter lg:table-cell"
>
Location
</th>
<th
scope="col"
className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left section-text backdrop-blur backdrop-filter"
>
Language
</th>
<th
scope="col"
className="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-3 pr-4 backdrop-blur backdrop-filter sm:pr-6 lg:pr-8"
>
<span className="sr-only">Sign Up</span>
</th>
</tr>
</thead>
<tbody>
{events.map((event, eventIdx) => (
<tr key={event.name}>
<td
className={classNames(
eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
'whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-900 sm:pl-6 lg:pl-8',
)}
>
{event.name}
</td>
<td
className={classNames(
eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
'hidden whitespace-nowrap px-3 py-4 text-base text-gray-500 sm:table-cell',
)}
>
{event.date}
</td>
<td
className={classNames(
eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
'hidden whitespace-nowrap px-3 py-4 text-base text-gray-500 lg:table-cell',
)}
>
{event.location}
</td>
<td
className={classNames(
eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
'whitespace-nowrap px-3 py-4 text-base text-gray-500',
)}
>
{event.languages.map((lang) => (
<span key={lang} className="inline-block mx-2">
{languageIcons[lang]}
</span>
))}
</td>
<td
className={classNames(
eventIdx !== events.length - 1 ? 'border-b border-gray-200' : '',
'relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-8 lg:pr-8',
)}
>
<a href={event.signupLink} target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-900">
Sign Up<span className="sr-only">, {event.name}</span>
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)
}