Working on tags

Author: shawn-mcgee

src/pages/idea/tag/[tag].astro

@@ -3,7 +3,7 @@ import Drawer from "@layouts/Drawer.astro";
 import Layout from "@layouts/Layout.astro";
 import { Idea } from "@tool/idea";
 import { getCollection } from "astro:content";
-import { Construction, Lightbulb } from "lucide-astro";
+import { Construction, Lightbulb, Hash } from "lucide-astro";
 
 export async function getStaticPaths() {
   return (await getCollection("ideas")).reduce((tags, idea) => {
@@ -26,7 +26,20 @@ const ideas = (await getCollection("ideas"))
   <Drawer>
     <div class="flex flex-col w-full items-center">
       <div class="h-6"></div>
-      <span class="text-4xl font-bold"># {tag}</span> 
+      <div class="w-full flex flex-row justify-center items-center">
+        <span class="text-4xl">
+          Ideas With
+        </span>
+        <span class="tooltip tooltip-bottom" data-tip="More Tags">
+          <a href="/idea/tag/" class="btn btn-circle btn-ghost btn-xl">
+            <Hash class="w-10 h-10"/>
+          </a>
+        </span>        
+        <span class="text-4xl font-bold"> 
+          {tag}
+        </span> 
+      </div>
+      
       <div class="h-4"></div>
       <div class="w-full flex flex-row flex-wrap max-w-xs justify-center sm:max-w-2xl lg:max-w-5xl">
         { ideas.map(idea => (

src/pages/idea/tag/index.astro

@@ -1,7 +1,8 @@
 ---
-import Layout from "@layouts/Layout.astro"
-import Drawer from "@layouts/Drawer.astro"
+import Drawer from "@layouts/Drawer.astro";
+import Layout from "@layouts/Layout.astro";
 import { getCollection } from "astro:content";
+import { Hash } from "lucide-astro";
 
 const tags = (await getCollection("ideas"))
   .reduce((tags, idea) => {
@@ -17,7 +18,15 @@ const tags = (await getCollection("ideas"))
   <Drawer>
     <div class="flex flex-col w-full items-center">
       <div class="h-6"></div>
-      <span class="text-4xl font-bold">Tags</span>
+      <div class="flex flex-row justify-center items-center gap-1">
+        <span class="text-4xl"></span>
+        <span class="tooltip tooltip-bottom" data-tip="More Tags">
+          <a href="/idea/tag/" class="btn btn-circle btn-ghost btn-xl">
+            <Hash class="w-10 h-10"/>
+          </a>
+        </span>
+        <span class="text-4xl font-bold">Tags</span>
+      </div>
       <div class="h-4"></div>
       <div class="w-full grid grid-cols-1 max-w-xs sm:grid-cols-3 sm:max-w-2xl lg:grid-cols-5 lg:max-w-5xl">
         { Object.entries(tags).sort(([a,], [b,]) => {