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

fix/all ticket types are rendered #399

Closed
wants to merge 1 commit into from
Closed

fix/all ticket types are rendered #399

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
66 changes: 42 additions & 24 deletions components/Tickets/ticketCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,50 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import Button from '../Buttons/button';
import cityList from '../../config/city-lists.json'; // Adjust the path to your JSON file

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';
function TicketCards({ className }) {
const [eventsData, setEventsData] = useState([]);

useEffect(() => {
// Set the event data from the imported JSON file
setEventsData(cityList);
}, []);

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>
<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'}
</Button>
) : (
<a href={city.ticket} target='_blank' rel='noreferrer'>
<Button className='w-[200px]'>{buttonText}</Button>
</a>
)}
</div>
<div className="flex flex-wrap justify-center gap-4">
{eventsData.map((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';

return (
<div
key={city.name}
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} transition-transform duration-300 ease-in-out transform hover:scale-105`} // Added hover scale effect
>
<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-2 text-sm'>{city.description}</div> {/* Added description */}
</div>
<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'}
</Button>
) : (
<a href={city.ticket} target='_blank' rel='noreferrer'>
<Button className='w-[200px]'>{buttonText}</Button>
</a>
)}
</div>
</div>
);
})}
</div>
);
}

export default TicketCards;
export default TicketCards;
Loading