Timeline: Use component

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 Project from '../../data/Project'
+import react, {Children, ReactNode} from 'react'
 
 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