closes #36

willpinha · Jan 10, 2024 · f540e0d · f540e0d
1 parent f4d9f1c
commit f540e0d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/src/components/AllTags.svelte b/src/components/AllTags.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import TagExamples from "./TagExamples.svelte";
+    import { getTags } from "../utils/collection";
+
+    const tags: string[] = getTags(); 
+</script>
+
+<div class="flex flex-col gap-8">
+    <div class="flex items-center gap-2">
+        <a href="/" class="btn btn-ghost px-3">
+            <span class="hidden">Get back</span>
+
+            <i class="fa-solid fa-arrow-left-long text-2xl"></i>
+        </a>
+
+        <h1 class="text-3xl font-bold text-primary">All tags</h1>
+    </div>
+
+    <div class="flex flex-col gap-20">
+        {#each tags as tag}
+            <TagExamples {tag} withArrow={false} smallTitle />
+        {/each}
+    </div>
+</div>
diff --git a/src/components/Filter.svelte b/src/components/Filter.svelte
@@ -18,6 +18,7 @@
 		🌸 You can find
 		<span class="badge badge-accent badge-outline badge-sm">{numExamples}</span> UI examples in
 		<span class="badge badge-accent badge-outline badge-sm">{tags.length}</span> tags!
+		<a href="/all" class="link link-accent">See all here</a>
 	</div>
 
 	<label for="filter" class="flex relative items-center">

diff --git a/src/components/TagExamples.svelte b/src/components/TagExamples.svelte
@@ -4,19 +4,23 @@
     import Preview from "../components/Preview.svelte";
 
     export let tag: string;
+    export let withArrow: boolean = true;
+    export let smallTitle: boolean = false;
 
     const examples = collection[tag];
 </script>
 
 <div class="flex flex-col gap-8">
     <div class="flex items-center gap-2">
-        <a href="/" class="btn btn-ghost px-3">
-            <span class="hidden">Get back</span>
+        {#if withArrow}
+            <a href="/" class="btn btn-ghost px-3">
+                <span class="hidden">Get back</span>
 
-            <i class="fa-solid fa-arrow-left-long text-2xl"></i>
-        </a>
+                <i class="fa-solid fa-arrow-left-long text-2xl"></i>
+            </a>
+        {/if}
 
-        <h1 class="text-3xl font-bold text-primary">#{tag}</h1>
+        <h1 class="text-3xl font-bold text-primary" class:text-xl={smallTitle}>#{tag}</h1>
     </div>
 
     <ul class="timeline timeline-snap-icon timeline-compact timeline-vertical">

diff --git a/src/pages/all.astro b/src/pages/all.astro
@@ -0,0 +1,14 @@
+---
+import Page from "../layout/Page.astro";
+import Navbar from "../components/Navbar.svelte";
+import Content from "../layout/Content.astro";
+import AllTags from "../components/AllTags.svelte";
+---
+
+<Page title="All">
+    <Navbar />
+
+    <Content>
+        <AllTags />
+    </Content>
+</Page>