Add icon down

src/components/timeline/TimelineCard.tsx

@@ -1,5 +1,6 @@
 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>>[]
@@ -17,7 +18,10 @@ function TimelineCard({ children } : TimelineCardProps) {
   });
   return (
     <details>
-      <summary>{titles}</summary>
+      <summary>
+        {titles}
+        <i><FaCaretDown/></i>
+      </summary>
       <div>{childrens}</div>
     </details>
   )

src/components/timeline/TimelineElement.scss

@@ -36,7 +36,7 @@
             }
     
             & > summary {
-                @apply block select-none cursor-pointer outline-none p-5 font-semibold;
+                @apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;
                 
                 // BEGIN TRANSITION
                 @apply mb-0;
@@ -46,11 +46,24 @@
                 &: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 {
                     @apply mb-5; // TRANSITION
+
+                    & > i > svg {
+                        @apply -rotate-180;
+                    }
                 }
             }
         }