From edbe90de42407564f6cdd794af5edc38b748bc69 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sat, 3 Jun 2023 13:19:46 +0200
Subject: [PATCH] Add timeline

---
 src/App.tsx                                 | 14 +++---
 src/components/timeline/Timeline.scss       | 52 +++++++++++++++++++++
 src/components/timeline/Timeline.tsx        | 19 ++++++++
 src/components/timeline/TimelineElement.tsx | 20 ++++++++
 src/data/Project.ts                         |  2 +
 5 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 src/components/timeline/Timeline.scss
 create mode 100644 src/components/timeline/Timeline.tsx
 create mode 100644 src/components/timeline/TimelineElement.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fe9b394..744c424 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,18 @@
 import './App.css'
 import TopComponent from "./components/TopComponent";
 import ShortDescription from "./components/ShortDescription";
-import Project from "./components/Project";
+import Timeline from "./components/timeline/Timeline";
+import TimelineElement from "./components/timeline/TimelineElement";
+import {PROJECTS} from "./data/Project";
 
 function App() {
     return (
         <>
             <TopComponent></TopComponent>
             <ShortDescription></ShortDescription>
-            {
-                [
-                    { title: 'Site web limouzik', description: 'Le site web de limouzik', organization: 'Limouzik', tags: ['Symfony']},
-                    { title: 'Application V3', description: 'V3', organization: 'Limouzik', tags: ['React', 'MIDI', 'Webpack', 'Cordova', 'Electron', 'SteamAPI']},
-                    { title: 'Application V4', description: 'V4', organization: 'Limouzik', tags: ['Unity 3D (2019)', 'MPTK', 'C#', 'WASM', 'SteamAPI']},
-                ].map((props) => (<Project {...props}/>))
-            }
+            <Timeline>
+                { PROJECTS.map(p => <TimelineElement project={p} />) }
+            </Timeline>
         </>
     )
 }
diff --git a/src/components/timeline/Timeline.scss b/src/components/timeline/Timeline.scss
new file mode 100644
index 0000000..f45e223
--- /dev/null
+++ b/src/components/timeline/Timeline.scss
@@ -0,0 +1,52 @@
+.timeline {
+    @apply w-full max-w-5xl flex justify-center;
+
+    & > ul {
+        @apply list-none py-5 px-0 relative w-full;
+
+        & > li {
+            @apply mb-12 relative flex;
+
+            & > details {
+                @apply w-2/5 rounded-xl overflow-hidden relative bg-[#f5f5f5];
+                box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+
+                & > summary {
+                    @apply block select-none cursor-pointer outline-none p-5 mb-0 font-semibold;
+                    transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
+
+                    &:hover {
+                        @apply bg-[#f8f8f8];
+                    }
+                }
+
+                & > p {
+                    @apply py-5 pl-0 pr-2;
+                }
+
+                &[open] {
+                    & > summary {
+                        @apply mb-5 pb-5;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                    }
+                }
+            }
+
+            // Place point in center line
+            &:before {
+                @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-1/2 bg-[#f8f8f8] -ml-2 z-50;
+                box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+            }
+
+            &:nth-child(even) {
+                justify-content: flex-end;
+            }
+        }
+
+        // Draw center line
+        &:before {
+            @apply top-0 bottom-0 left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
+            box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx
new file mode 100644
index 0000000..9cc4a03
--- /dev/null
+++ b/src/components/timeline/Timeline.tsx
@@ -0,0 +1,19 @@
+import './Timeline.scss'
+import react, { ReactNode } from 'react'
+
+type TimelapseProps = {
+  children: ReactNode
+}
+
+function Timeline({ children } : TimelapseProps) {
+
+  return (
+    <div className='timeline'>
+      <ul>
+        { children }
+      </ul>
+    </div>
+  )
+}
+
+export default Timeline
\ No newline at end of file
diff --git a/src/components/timeline/TimelineElement.tsx b/src/components/timeline/TimelineElement.tsx
new file mode 100644
index 0000000..2fc9adc
--- /dev/null
+++ b/src/components/timeline/TimelineElement.tsx
@@ -0,0 +1,20 @@
+import react, {Children} from 'react'
+import Project from '../../data/Project'
+
+type TimelineElementProps = {
+    project: Project
+}
+
+function TimelineElement({ project } : TimelineElementProps) {
+
+  return (
+    <li>
+      <details>
+        <summary>{ project.name }</summary>
+        <p>{ project.description }</p>
+      </details>
+    </li>
+  )
+}
+
+export default TimelineElement
\ No newline at end of file
diff --git a/src/data/Project.ts b/src/data/Project.ts
index 49936c8..b79a980 100644
--- a/src/data/Project.ts
+++ b/src/data/Project.ts
@@ -21,6 +21,8 @@ interface Project {
     tools: Tool[]
 }
 
+export default Project
+
 // LIMOUZIK
 
 export const SiteWebLimouzik: Project = {