Timeline Component

src/lib/component/Icons.ts

@@ -8,6 +8,8 @@ import FaSolidUser from 'svelte-icons-pack/fa/FaSolidUser';
 import FaBars from 'svelte-icons-pack/fa/FaSolidBars';
 import FaTimes from 'svelte-icons-pack/fa/FaSolidTimes';
 import FaSolidGlobe from 'svelte-icons-pack/fa/FaSolidGlobe';
+import CgChevronLeft from 'svelte-icons-pack/cg/CgChevronLeft';
+import CgChevronRight from 'svelte-icons-pack/cg/CgChevronRight';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -19,7 +21,9 @@ const Icons = {
   User: FaSolidUser,
   Bars: FaBars,
   Times: FaTimes,
-  Globe: FaSolidGlobe
+  Globe: FaSolidGlobe,
+  AngleRight: CgChevronRight,
+  AngleLeft: CgChevronLeft
 };
 
 export default Icons;

src/lib/layout/HorizontalTimeline.stories.ts

@@ -0,0 +1,18 @@
+import HorizontalTimeline from './HorizontalTimeline.svelte';
+
+export default {
+  title: 'Atoms/Timelines/HorizontalTimeline',
+  component: HorizontalTimeline
+};
+
+export const HorizontalTimelineArea = {
+  args: {
+    generations: [
+      { schoolYear: '18/19' },
+      { schoolYear: '19/20' },
+      { schoolYear: '20/21' },
+      { schoolYear: '21/22' },
+      { schoolYear: '22/23' }
+    ]
+  }
+};

src/lib/layout/HorizontalTimeline.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { Generation } from '@/model/Generation';
+  import Icon from '../component/Icon.svelte';
+  import Icons from '../component/Icons';
+
+  export let generations: Generation[];
+  // by default we select the last generation but we can change it to any generation
+  // that is on the list
+  export let selectedGeneration: Generation | undefined = generations.at(-1);
+
+  //TODO (luisd): make this size reactive?
+  const displayedSize = 3;
+  let offset =
+    generations.length < displayedSize
+      ? 0
+      : generations.findIndex((element) => element == selectedGeneration) - displayedSize + 1;
+
+  $: displayedGenerations = generations.slice(offset, offset + displayedSize);
+
+  const changeDisplayedGenerations = (i: number) => {
+    if (generations.length < displayedSize) return;
+    if (generations.length - (offset + i) < displayedSize) return;
+    if (offset + i < 0) {
+      offset = 0;
+      return;
+    }
+    offset += i;
+  };
+</script>
+
+<div class="flex w-full flex-row items-center justify-center gap-1">
+  <button
+    data-end={offset == 0 || null}
+    aria-label="See previous generations"
+    class="[&>svg]:text-taupe-300 [&>svg]:data-[end=true]:text-white"
+    on:click={() => changeDisplayedGenerations(-1)}
+  >
+    <Icon src={Icons.AngleLeft} size="3em" color="white" />
+  </button>
+  <div class="grid w-9/12 grid-cols-1 grid-rows-1">
+    <!-- Bar -->
+    <div class="z-1 col-span-full row-span-full m-auto h-1.5 w-full rounded-lg bg-taupe-300" />
+    <!-- Points -->
+    <div
+      class="z-2 col-span-full row-span-full m-auto flex w-full flex-row justify-around overflow-hidden "
+    >
+      {#each displayedGenerations as generation}
+        {#if generation == selectedGeneration}
+          <button
+            class="mb-6 flex flex-col items-center justify-start"
+            on:click={() => (selectedGeneration = generation)}
+            data-active
+          >
+            <p class="text-taupe-100">{generation.schoolYear}</p>
+            <div class="h-4 w-4 rounded-full bg-taupe-100" />
+          </button>
+        {:else}
+          <button
+            class="mb-6 flex flex-col items-center justify-start"
+            on:click={() => (selectedGeneration = generation)}
+          >
+            <p class="text-taupe-300">{generation.schoolYear}</p>
+            <div class="h-4 w-4 rounded-full bg-taupe-300" />
+          </button>
+        {/if}
+      {/each}
+    </div>
+  </div>
+  <button
+    data-end={offset == generations.length - displayedSize || null}
+    aria-label="See newer generations"
+    class="[&>svg]:text-taupe-300 [&>svg]:data-[end=true]:text-white"
+    on:click={() => changeDisplayedGenerations(1)}
+  >
+    <Icon src={Icons.AngleRight} size="3em" color="white" />
+  </button>
+</div>

src/model/Generation.ts

@@ -0,0 +1,3 @@
+export type Generation = {
+  schoolYear: String;
+};

src/routes/team/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+  import HorizontalTimeline from '@/lib/layout/HorizontalTimeline.svelte';
+</script>
+
+<section
+  class="absolute mx-auto flex h-screen w-full min-w-[40%] flex-col items-center justify-center gap-10"
+>
+  <h1 class="font-source_code text-3xl font-medium text-white">
+    &lt; <span class="font-bold">Equipa</span> /&gt;
+  </h1>
+  <HorizontalTimeline
+    generations={[
+      { schoolYear: '18/19' },
+      { schoolYear: '19/20' },
+      { schoolYear: '20/21' },
+      { schoolYear: '21/22' },
+      { schoolYear: '22/23' }
+    ]}
+  />
+</section>