Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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}`}>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8">
<div className="flow-root">
<ul className="-mb-8">
<li>
<div className="relative pb-8">
<div className="flex-col">
{events.map((event: any) => {
return (
<div
key={event.id}
className="min-w-0 pt-1.5 flex-1 md:flex justify-between space-x-4 mt-5"
>
<div className="md:flex text-lg whitespace-nowrap">
<div>
<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>
<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="md:flex text-sm whitespace-nowrap">
<div className="mr-4 mt-3">
<span>
{event.date_start}
</span>{" "}
{" au "}
<span>
{event.date_end}
</span>
</div>
</div>
</div>
)
})}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Events