Skip to content
Snippets Groups Projects
Commit a4f0ef2b authored by Toavina Rasoatamindrainy's avatar Toavina Rasoatamindrainy Committed by Julien MARGAIL
Browse files

Feat/events

parent 0415c971
No related branches found
No related tags found
No related merge requests found
......@@ -224,6 +224,11 @@ interface ISection {
}
export function Section(props: ISection): JSX.Element
interface IEvents {
className?: string
}
export function Events(props: IEvents): JSX.Element
interface ISections {
ids: string[]
}
......
......@@ -22,6 +22,7 @@ export { default as Hero } from "./src/components/Hero"
export { default as News } from "./src/components/News"
export { default as Feature } from "./src/components/Feature"
export { default as Partners } from "./src/components/Partners"
export { default as Events } from "./src/components/Events"
//Carousel components
export { default as Carousel } from "./src/components/core/Carousel"
......
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
import React from "react"
import { Content, Events, Link } from "@onegeo/gatsby-theme-onegeo"
function events() {
return (
<Content>
<div className="prose">
<Link to="/doc">Retour</Link>
<h1>Events</h1>
<h2>Props</h2>
<div className="mockup-code">
<pre>
<code>
{`interface Props {
className?: string
}`}
</code>
</pre>
</div>
<h2>Example</h2>
</div>
<br />
<Events />
</Content>
)
}
export default events
......@@ -30,6 +30,8 @@ function index(): ReactElement {
<br></br>
<Link to="/doc/section">Section</Link>
<br></br>
<Link to="/doc/events">Events</Link>
<br></br>
<Link to="/doc/sections">Sections</Link>
</div>
</Content>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment