Timeline: Use component

src/App.tsx

@@ -3,8 +3,11 @@ import TopComponent from "./components/TopComponent";
 import ShortDescription from "./components/ShortDescription";
 import Timeline from "./components/timeline/Timeline";
 import TimelineElement from "./components/timeline/TimelineElement";
-import {PROJECTS} from "./data/Project";
+import { PROJECTS } from "./data/Project";
-import TimelineCard from './components/timeline/TimelineElementCard';
+import TimelineCard from './components/timeline/TimelineCard';
+import TimelineCardSummary from './components/timeline/TimelineCardSummary';
+import TimelineCardContent from './components/timeline/TimelineCardContent';
+import TimelineLabel from './components/timeline/TimelineLabel';
 
 function App() {
     return (
@@ -12,32 +15,58 @@ function App() {
             <TopComponent></TopComponent>
             <ShortDescription></ShortDescription>
             <Timeline>
-                <TimelineElement category='2019-2020'>
+                <TimelineElement>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineLabel>2019-2020</TimelineLabel>
+                    <TimelineCard>
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
                             Youpi
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
                             Youpi
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
-                        Youpi
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
-                        Youpi
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
                 </TimelineElement>
-                <TimelineElement category='2019-2020'>
+                <TimelineElement>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineLabel>2019-2020</TimelineLabel>
-                        Youpi
+                    <TimelineCard>
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
-                        Youpi
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
-                        Youpi
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
-                    <TimelineCard title='Limouzik'>
+                    <TimelineCard>
-                        Youpi
+                        <TimelineCardSummary>Limouzik</TimelineCardSummary>
+                        <TimelineCardContent>
+                            <strong>Youpi</strong>
+                        </TimelineCardContent>
                     </TimelineCard>
                 </TimelineElement>
             </Timeline>

src/components/timeline/TimelineCard.tsx

@@ -0,0 +1,26 @@
+import react, {Children, ReactNode} from 'react'
+import Project from '../../data/Project'
+
+type TimelineCardProps = {
+  children: ReactNode
+}
+
+function TimelineCard({ children } : TimelineCardProps) {
+  let titles : ReactNode[] = []
+  let childrens : ReactNode[] = []
+  Children.forEach(children, (c) => {
+    if (c.type.name === "TimelineCardSummary") {
+      titles.push(c)
+    } else {
+      childrens.push(c)
+    }
+  });
+  return (
+    <details>
+      <summary>{titles}</summary>
+      <div>{childrens}</div>
+    </details>
+  )
+}
+
+export default TimelineCard

src/components/timeline/TimelineCardContent.tsx

@@ -0,0 +1,14 @@
+import react, {ReactNode} from 'react'
+import Project from '../../data/Project'
+
+type TimelineCardContentProps = {
+  children: ReactNode
+}
+
+function TimelineCardContent({ children } : TimelineCardContentProps) {
+  return (
+    <>{children}</>
+  )
+}
+
+export default TimelineCardContent

src/components/timeline/TimelineCardSummary.tsx

@@ -0,0 +1,14 @@
+import react, {ReactNode} from 'react'
+import Project from '../../data/Project'
+
+type TimelineCardSummaryProps = {
+  children: ReactNode
+}
+
+function TimelineCardSummary({ children } : TimelineCardSummaryProps) {
+  return (
+    <>{children}</>
+  )
+}
+
+export default TimelineCardSummary

src/components/timeline/TimelineElement.tsx

@@ -1,21 +1,27 @@
 import './TimelineElement.scss'
-import react, {ReactNode} from 'react'
+import react, {Children, ReactNode} from 'react'
-import Project from '../../data/Project'
 
 type TimelineElementProps = {
-  category: string,
   children: ReactNode
 }
 
-function TimelineElement({ category, children } : TimelineElementProps) {
+function TimelineElement({ children } : TimelineElementProps) {
-
+  let labels : ReactNode[] = []
+  let cards : ReactNode[] = []
+  Children.forEach(children, (c) => {
+    if (c.type.name === "TimelineLabel") {
+      labels.push(c)
+    } else {
+      cards.push(c)
+    }
+  });
   return (
     <li className='timeline-element'>
       <div className='timeline-element__category'>
-        { category }
+        { labels }
       </div>
       <div className='timeline-element__info'>
-        { children }
+        { cards }
       </div>
     </li>
   )

src/components/timeline/TimelineElementCard.tsx

@@ -1,18 +0,0 @@
-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

src/components/timeline/TimelineLabel.tsx

@@ -0,0 +1,14 @@
+import react, {ReactNode} from 'react'
+import Project from '../../data/Project'
+
+type TimelineLabelProps = {
+  children: ReactNode
+}
+
+function TimelineLabel({ children } : TimelineLabelProps) {
+  return (
+    <>{children}</>
+  )
+}
+
+export default TimelineLabel