Search UI

src/lib/components/search/ArticleSearchResult.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { ArticleSearchReturnAttributes } from "$lib/search/searchTypes";
+  export let article: ArticleSearchReturnAttributes;
+</script>
+
+<li>
+  <a
+    href={"/news/" + article.slug}
+    class="border border-transparent focus:border-primary"
+    id=".search-result"
+  >
+    <div class="avatar aspect-square w-8 overflow-hidden rounded-full">
+      <span class="i-mdi-newspaper text-2xl"></span>
+    </div>
+    <div>
+      <h4 class="text-balance">
+        {article.header}
+      </h4>
+      <p class="line-clamp-1 text-gray-500">
+        {article.body}
+      </p>
+    </div>
+  </a>
+</li>

src/lib/components/search/CommitteeSearchResult.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { CommitteeSearchReturnAttributes } from "$lib/search/searchTypes";
+  import CommitteeIcon from "$lib/components/images/CommitteeIcon.svelte";
+
+  export let committee: CommitteeSearchReturnAttributes;
+</script>
+
+<li>
+  <a
+    href={"/committees/" + committee.shortName}
+    class="border border-transparent focus:border-primary"
+    id=".search-result"
+  >
+    <div class="avatar aspect-square w-8 overflow-hidden rounded-full">
+      <figure class="relative w-full">
+        <CommitteeIcon {committee} />
+      </figure>
+    </div>
+    <div>
+      <h4>
+        <b>
+          {committee.name}
+        </b>
+      </h4>
+      <p class="line-clamp-1 text-gray-500">
+        {committee.description}
+      </p>
+    </div></a
+  >
+</li>

src/lib/components/search/EventSearchResult.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { EventSearchReturnAttributes } from "$lib/search/searchTypes";
+  export let event: EventSearchReturnAttributes;
+</script>
+
+<li>
+  <a
+    href={"/events/" + event.slug}
+    class="border border-transparent focus:border-primary"
+    id=".search-result"
+  >
+    <div class="avatar aspect-square w-8 overflow-hidden rounded-full">
+      <span class="i-mdi-calendar text-2xl"></span>
+    </div>
+    <div>
+      <h4>
+        {event.title}
+      </h4>
+      <p class="line-clamp-1 text-gray-500">
+        {event.description}
+      </p>
+    </div>
+  </a>
+</li>