Events.tsx

import React from "react"
import { graphql, useStaticQuery } from "gatsby"

interface Props {
    className?: string
}

const Events = (props: Props) => {
    const dataDirectus = useStaticQuery(graphql`
        query MyQuery {
            directusWithDatePos: directus {
                events(filter: { date_start: { _gte: "now" } }, limit: 3) {
                    id
                    title
                    organization
                    date_start
                    date_end
                    url
                    oranization_url
                }
            }
            directusWithoutDatePos: directus {
                events(filter: { date_start: { _lt: "now" } }, limit: 1) {
                    id
                    title
                    organization
                    date_start
                    date_end
                    url
                    oranization_url
                }
            }
        }
    `)

    const { className = "" } = props
    let events
    if (dataDirectus.directusWithDatePos.events.length > 0) {
        events = dataDirectus.directusWithDatePos.events
    } else {
        events = dataDirectus.directusWithoutDatePos.events
    }

    return (
        <div className={`${className}`}>
            <ul className="mb-3">
                <li>
                    {events.map((event: any) => {
                        return (
                            <div
                                key={event.id}
                                className="md:flex justify-between space-x-4 mt-4"
                            >
                                <div className="md:flex text-lg whitespace-nowrap">
                                    <span className="h-10 w-10 rounded-full flex items-center justify-center ring-8 ring-white bg-secondary">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor"
                                            aria-hidden="true"
                                            className="h-5 w-5 text-neutral-content"
                                        >
                                            <path
                                                fillRule="evenodd"
                                                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                                clipRule="evenodd"
                                            ></path>
                                        </svg>
                                    </span>
                                    <div className="mt-2 ml-4">
                                        <a
                                            href={event.url}
                                            className="font-medium hover:text-primary"
                                        >
                                            {event.title}
                                        </a>
                                        {" - "}
                                        <a
                                            href={event.oranization_url}
                                            className="hover:text-secondary"
                                        >
                                            {event.organization}
                                        </a>
                                    </div>
                                </div>

                                <div className="text-sm mt-3">
                                    <span>{event.date_start}</span> {" au "}
                                    <span>{event.date_end}</span>
                                </div>
                            </div>
                        )
                    })}
                </li>
            </ul>
        </div>
    )
}

export default Events