Timeline: Add group

src/App.tsx

@@ -4,6 +4,7 @@ import ShortDescription from "./components/ShortDescription";
 import Timeline from "./components/timeline/Timeline";
 import TimelineElement from "./components/timeline/TimelineElement";
 import {PROJECTS} from "./data/Project";
+import TimelineCard from './components/timeline/TimelineElementCard';
 
 function App() {
     return (
@@ -11,7 +12,34 @@ function App() {
             <TopComponent></TopComponent>
             <ShortDescription></ShortDescription>
             <Timeline>
-                { PROJECTS.map(p => <TimelineElement project={p} />) }
+                <TimelineElement category='2019-2020'>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                </TimelineElement>
+                <TimelineElement category='2019-2020'>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                    <TimelineCard title='Limouzik'>
+                        Youpi
+                    </TimelineCard>
+                </TimelineElement>
             </Timeline>
         </>
     )

src/components/timeline/Timeline.scss

@@ -4,45 +4,6 @@
     & > ul {
         @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
 
-        & > li {
-            @apply mb-12 relative flex;
-
-            & > details {
-                @apply w-4/5 md:w-2/5 left-[10%] md:left-0 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-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
-                box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
-            }
-
-            &:nth-child(even) {
-                @apply md:justify-end;
-            }
-        }
-
         // Draw center line
         &:before {
             @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];

src/components/timeline/TimelineElement.scss

@@ -0,0 +1,51 @@
+.timeline-element {
+    @apply relative flex flex-col md:flex-row justify-between;
+
+    // Place point in center line
+    &:before {
+        @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
+        box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
+    }
+
+    &:nth-child(even) {
+        @apply md:flex-row-reverse;
+
+        .timeline-element__category {
+            @apply md:flex-row-reverse;
+        }
+    }
+
+    .timeline-element__info, .timeline-element__category {
+        @apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
+    }
+
+    .timeline-element__category {
+        @apply top-5 flex md:justify-end mb-12;
+    }
+
+    .timeline-element__info {
+        & > details {
+            @apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
+            box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
+
+            & > summary, & > div {
+                @apply p-5;
+            }
+    
+            & > summary {
+                @apply block select-none cursor-pointer outline-none mb-0 font-semibold;
+                transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
+    
+                &:hover {
+                    @apply bg-[#f8f8f8];
+                }
+            }
+    
+            &[open] {
+                & > summary {
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+    }
+}

src/components/timeline/TimelineElement.tsx

@@ -1,18 +1,22 @@
-import react, {Children} from 'react'
+import './TimelineElement.scss'
+import react, {ReactNode} from 'react'
 import Project from '../../data/Project'
 
 type TimelineElementProps = {
-    project: Project
+  category: string,
+  children: ReactNode
 }
 
-function TimelineElement({ project } : TimelineElementProps) {
+function TimelineElement({ category, children } : TimelineElementProps) {
 
   return (
-    <li>
+    <li className='timeline-element'>
-      <details>
+      <div className='timeline-element__category'>
-        <summary>{ project.name }</summary>
+        { category }
-        <p>{ project.description }</p>
+      </div>
-      </details>
+      <div className='timeline-element__info'>
+        { children }
+      </div>
     </li>
   )
 }

src/components/timeline/TimelineElementCard.tsx

@@ -0,0 +1,18 @@
+import react, {ReactNode} from 'react'
+import Project from '../../data/Project'
+
+type TimelineElementCardProps = {
+  title: string,
+  children: ReactNode
+}
+
+function TimelineCard({ title, children } : TimelineElementCardProps) {
+  return (
+    <details>
+      <summary>{title}</summary>
+      <div>{children}</div>
+    </details>
+  )
+}
+
+export default TimelineCard