Feat/events

index.d.ts

@@ -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[]
 }

index.js

@@ -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"

src/components/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}`}>
+            <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

src/pages-doc/doc/events.tsx

+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

src/pages-doc/doc/index.tsx

@@ -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>