Begin migrate to leptos

src_old/components/timeline/Timeline.scss

@@ -0,0 +1,14 @@
+.timeline {
+    @apply w-full px-5;
+
+    & > ul {
+        @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
+
+        // Draw center line
+        &:before {
+            @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
+            @apply bg-primary/10 dark:bg-dark_primary/10;
+            @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+        }
+    }
+}

src_old/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

src_old/components/timeline/TimelineCard.tsx

@@ -0,0 +1,30 @@
+import react, {Children, ReactNode} from 'react'
+import TimelineCardSummary from './TimelineCardSummary'
+import { FaCaretDown } from 'react-icons/fa'
+
+type TimelineCardProps = {
+  children: react.ReactElement<any, react.JSXElementConstructor<any>>[]
+}
+
+function TimelineCard({ children } : TimelineCardProps) {
+  let titles : ReactNode[] = []
+  let childrens : ReactNode[] = []
+  Children.forEach(children, (c) => {
+    if (c.type === TimelineCardSummary) {
+      titles.push(c)
+    } else {
+      childrens.push(c)
+    }
+  });
+  return (
+    <details>
+      <summary>
+        {titles}
+        <i><FaCaretDown/></i>
+      </summary>
+      <div>{childrens}</div>
+    </details>
+  )
+}
+
+export default TimelineCard

src_old/components/timeline/TimelineCardContent.tsx

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

src_old/components/timeline/TimelineCardSummary.tsx

@@ -0,0 +1,21 @@
+import react, {ReactNode} from 'react'
+
+type TimelineCardSummaryProps = {
+  children: ReactNode,
+  tags?: ReactNode[]
+}
+
+function TimelineCardSummary({ children, tags } : TimelineCardSummaryProps) {
+  return (
+    <>
+      {children}
+      {
+        tags && <div className='flex flex-wrap gap-2 mt-2'>
+          { tags }
+        </div>
+      }
+    </>
+  )
+}
+
+export default TimelineCardSummary

src_old/components/timeline/TimelineElement.scss

@@ -0,0 +1,83 @@
+.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 -ml-2 z-50;
+        @apply bg-primary/10 dark:bg-dark_primary/10;
+        @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+    }
+
+    &: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;
+        @apply text-on_surface dark:text-dark_on_surface;
+    }
+
+    .timeline-element__category {
+        @apply top-5 flex md:justify-end mb-12;
+    }
+
+    .timeline-element__info {
+        & > details {
+            @apply mb-12 rounded-xl overflow-hidden relative;
+            @apply bg-primary/10 dark:bg-dark_primary/10;
+            @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+
+            & > summary, & > div {
+                @apply p-5;
+            }
+    
+            & > summary {
+                @apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;
+    
+                &:hover {
+                    @apply bg-primary/20 dark:bg-dark_primary/20;
+                }
+
+                i {
+                    @apply absolute right-5 h-full top-0 flex items-center;
+
+                    & > svg {
+                        @apply scale-125;
+                        transition: transform 300ms ease;
+                    }
+                }
+            }
+    
+            &[open] {
+                & > summary {
+                    & > i > svg {
+                        @apply -rotate-180;
+                    }
+
+                    & ~ * {
+                        animation: toggle 0.4s ease-in-out;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes toggle {
+    0% {
+        font-size: 0;
+        opacity: 0;
+    }
+    90% {
+        font-size: 1rem;
+        opacity: 0;
+    }
+    100% {
+        font-size: 1rem;
+        opacity: 1;
+    }
+}

src_old/components/timeline/TimelineElement.tsx

@@ -0,0 +1,31 @@
+import './TimelineElement.scss'
+import react, {Children, ReactNode} from 'react'
+import TimelineLabel from './TimelineLabel'
+
+type TimelineElementProps = {
+  children: react.ReactElement<any, react.JSXElementConstructor<any>>[]
+}
+
+function TimelineElement({ children } : TimelineElementProps) {
+  let labels : ReactNode[] = []
+  let cards : ReactNode[] = []
+  Children.forEach(children, (c) => {
+    if (c.type === TimelineLabel) {
+      labels.push(c)
+    } else {
+      cards.push(c)
+    }
+  });
+  return (
+    <li className='timeline-element'>
+      <div className='timeline-element__category'>
+        { labels }
+      </div>
+      <div className='timeline-element__info'>
+        { cards }
+      </div>
+    </li>
+  )
+}
+
+export default TimelineElement

src_old/components/timeline/TimelineLabel.tsx

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