feat: add marquee

src/lib/pages/home/author-display.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let data = {
+    author: '',
+    author_link: '',
+    author_avatar: ''
+  };
+</script>
+
+<div class="flex items-center gap-3">
+  <a href={`${data.author_link}`}>
+    <img src={data.author_avatar} alt="" class="w-7 rounded-full" />
+  </a>
+
+  <a href={`${data.author_link}`}> {data.author}</a>
+</div>

src/lib/pages/home/hero.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Repository } from '$lib/types/repository';
+  import Marquee from './marquee.svelte';
+  import MarqueeCard from './marquee-card.svelte';
+
+  export let data: Repository[] = [];
+
+  let firstRow = data.slice(0, data.length / 2);
+  let secondRow = data.slice(data.length / 2);
+</script>
+
+<div
+  class="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background py-5 mb-5 md:shadow-xl"
+>
+  <h2
+    class="mt-5 scroll-m-20 border-b pb-4 md:text-3xl text-center font-semibold tracking-tight transition-colors first:mt-0"
+  >
+    Open 10 source projects in Nigeria
+  </h2>
+  <Marquee pauseOnHover class="[--duration:20s]">
+    {#each firstRow as item}
+      <MarqueeCard {...item} />
+    {/each}
+  </Marquee>
+  <Marquee reverse pauseOnHover class="[--duration:20s]">
+    {#each secondRow as item}
+      <MarqueeCard {...item} />
+    {/each}
+  </Marquee>
+  <div
+    class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
+  ></div>
+  <div
+    class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"
+  ></div>
+</div>

src/lib/pages/home/marquee-card.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  import starIcon from '$lib/assets/star.svg';
+
+  export let author_avatar: string;
+  export let name: string;
+  export let author: string;
+  export let description: string;
+  export let stars: number;
+  export let link: string;
+</script>
+
+<a
+  href={link}
+  target="_blank"
+  class={cn(
+    'relative w-72 cursor-pointer overflow-hidden rounded-2xl border p-4',
+    // light styles
+    'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
+    // dark styles
+    'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]'
+  )}
+>
+  <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center gap-2">
+      <img class="rounded-full" width="32" height="32" alt="" src={author_avatar} />
+      <div class="flex flex-col">
+        <!-- svelte-ignore a11y-structure -->
+        <figcaption class="text-sm font-medium dark:text-white">
+          {name}
+        </figcaption>
+        <p class="text-xs font-medium dark:text-white/40">{author}</p>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <img src={starIcon} alt="" class="w-5 text-white fill-white" />
+      <p class="text-xs">{stars}</p>
+    </div>
+  </div>
+  <blockquote class="mt-2 text-sm line-clamp-3">{description}</blockquote>
+</a>

src/lib/pages/home/marquee.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  export let pauseOnHover: boolean = false;
+  export let vertical: boolean = false;
+  export let repeat: number = 4;
+  export let reverse: boolean = false;
+
+  let className: any = '';
+  export { className as class };
+</script>
+
+<div
+  class={cn(
+    'group flex overflow-hidden p-2 [--duration:2s] [--gap:1rem] [gap:var(--gap)]',
+    {
+      'flex-row': !vertical,
+      'flex-col': vertical
+    },
+    className
+  )}
+>
+  {#each { length: repeat } as _, i (i)}
+    <div
+      class={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
+        'animate-marquee flex-row': !vertical,
+        'animate-marquee-vertical flex-col': vertical,
+        'group-hover:[animation-play-state:paused]': pauseOnHover,
+        '[animation-direction:reverse]': reverse
+      })}
+    >
+      <slot>Default</slot>
+    </div>
+  {/each}
+</div>

src/lib/pages/home/page.svelte

@@ -8,6 +8,7 @@
   import detectUrlChange from 'detect-url-change';
 
   import Table from './table.svelte';
+  import Hero from './hero.svelte';
 
   let repositories: Repository[] = [];
   let apiMetadata: ApiMetadata = {
@@ -17,12 +18,12 @@
       totalItems: 250,
       itemsPerPage: 10,
       hasNextPage: false,
-      hasPrevPage: false,
+      hasPrevPage: false
     },
     sort: {
       sortBy: 'stars',
-      order: 'desc',
-    },
+      order: 'desc'
+    }
   };
   let currentPage: number = 1;
   let currentOrder: string = 'desc';
@@ -57,11 +58,11 @@
 
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1 + (page - 1) * 10,
+        id: index + 1 + (page - 1) * 10
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort,
+        sort: result.sort
       };
     } catch (err: any) {
       console.error(err);
@@ -91,11 +92,11 @@
       const result = await response.json();
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1,
+        id: index + 1
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort,
+        sort: result.sort
       };
     } catch (err: any) {
       console.error(err);
@@ -118,7 +119,7 @@
 >
   <Sidebar />
 
-  <div class="py-6 lg:gap-10 w-full max-w-2xl mx-auto">
+  <div class="py-6 lg:gap-10 w-full max-w-4xl mx-auto">
     {#if isFetching && !isMounted}
       <div class="rounded-md border w-full">
         <div class="flex flex-col gap-4 p-4">
@@ -132,21 +133,25 @@
       </div>
     {:else}
       <div>
-        <h2
-          class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-        >
-          Open source projects in Nigeria
-        </h2>
+        <Hero data={repositories} />
+
+        <div>
+          <h2
+            class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+          >
+            Open source projects in Nigeria
+          </h2>
+        </div>
+        {#key gettingFreshData}
+          <Table
+            data={repositories}
+            {apiMetadata}
+            bind:searchValue
+            isFetching={gettingFreshData}
+            onSearch={searchRepositories}
+          />
+        {/key}
       </div>
-      {#key gettingFreshData}
-        <Table
-          data={repositories}
-          {apiMetadata}
-          bind:searchValue
-          isFetching={gettingFreshData}
-          onSearch={searchRepositories}
-        />
-      {/key}
     {/if}
   </div>
 </div>