Events Components

import { ListEvents } from '@meaple/react-headless-components'
 
function EventsGrid() {
  return (
    <ListEvents filters={{ page: 1, limit: 12 }}>
      {({ events, isLoading, error, refetch }) => {
        if (isLoading) return <LoadingSpinner />
        if (error) return <ErrorMessage error={error} />
 
        return (
          <div className="grid">
            {events?.map(event => (
              <div key={event.id} className="card">
                <img src={event.image} alt={event.name} />
                <h3>{event.name}</h3>
                <p>{event.date}</p>
                <p>{event.location}</p>
                <button onClick={() => router.push(`/events/${event.id}`)}>
                  View Details
                </button>
              </div>
            ))}
          </div>
        )
      }}
    </ListEvents>
  )
}

import { ListEventTickets } from '@meaple/react-headless-components'
 
function EventTickets({ eventId }) {
  return (
    <ListEventTickets eventId={eventId}>
      {({ tickets, isLoading }) => (
        <div>
          {isLoading ? (
            <p>Loading tickets...</p>
          ) : (
            <div>
              {tickets?.map(ticket => (
                <div key={ticket.id}>
                  <h4>{ticket.name}</h4>
                  <p>${ticket.price}</p>
                  <p>{ticket.available} available</p>
                  <button>Select Ticket</button>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </ListEventTickets>
  )
}

import { ListEventProducts } from '@meaple/react-headless-components'
 
function EventMerchandise({ eventId }) {
  return (
    <ListEventProducts eventId={eventId}>
      {({ products, isLoading }) => (
        <div className="products">
          {products?.map(product => (
            <div key={product.id}>
              <img src={product.image} alt={product.name} />
              <h3>{product.name}</h3>
              <p>${product.price}</p>
              <button>Add to Cart</button>
            </div>
          ))}
        </div>
      )}
    </ListEventProducts>
  )
}

import { ListUserEvents } from '@meaple/react-headless-components'
 
function MyEvents({ userId }) {
  return (
    <ListUserEvents userId={userId}>
      {({ events, isLoading, error }) => (
        <div>
          <h2>My Events</h2>
          {events?.map(event => (
            <div key={event.id}>
              <h3>{event.name}</h3>
              <p>{new Date(event.date).toLocaleDateString()}</p>
              <a href={`/events/${event.id}`}>View Event</a>
            </div>
          ))}
        </div>
      )}
    </ListUserEvents>
  )
}

function FilteredEvents() {
  const [filters, setFilters] = useState({
    page: 1,
    limit: 10,
    category: 'music'
  })
 
  return (
    <div>
      <select onChange={(e) => setFilters({ ...filters, category: e.target.value })}>
        <option value="music">Music</option>
        <option value="sports">Sports</option>
        <option value="arts">Arts</option>
      </select>
 
      <ListEvents filters={filters}>
        {({ events, isLoading }) => (
          <div>
            {events?.map(event => (
              <EventCard key={event.id} event={event} />
            ))}
          </div>
        )}
      </ListEvents>
    </div>
  )
}