Refactor tag display logic to differentiate between technologies and tags, and update tag color handling

Author: brylie

src/pages/tags/[tag].astro

@@ -119,14 +119,12 @@ const pageTitle = `${tag} - Tagged Content`;
           >
             #{tag}
           </h1>
-          {
-            isTechnology && (
-              <span class="inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">
-                <Icon name="mdi:code-tags" class="w-4 h-4" />
-                Technology
-              </span>
-            )
-          }
+          <span
+            class="inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium {isTechnology ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300'} rounded-full"
+          >
+            <Icon name="mdi:code-tags" class="w-4 h-4" />
+            {isTechnology ? "Technology" : "Tag"}
+          </span>
         </div>
 
         <p class="text-lg text-gray-700 dark:text-gray-300 mb-6">

src/pages/tags/index.astro

@@ -71,19 +71,10 @@ function getTagSize(tag: string) {
 // Function to determine tag color based on type
 function getTagColor(tag: string) {
   const isTech = projectTechnologies.includes(tag);
-  const isProjectTag = projectTags.includes(tag);
-  const isPostTag = postTags.includes(tag);
-
-  if (isTech && (isProjectTag || isPostTag)) {
-    return "bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-800/40";
-  } else if (isTech) {
+  if (isTech) {
     return "bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-800/40";
-  } else if (isProjectTag && isPostTag) {
-    return "bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:bg-teal-800/40";
-  } else if (isProjectTag) {
-    return "bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-800/40";
   }
-  return "bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-800/40";
+  return "bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:bg-teal-800/40";
 }
 ---
 
@@ -162,6 +153,22 @@ function getTagColor(tag: string) {
         </h2>
       </div>
 
+      <!-- Legend -->
+      <div class="flex gap-4 mb-6">
+        <div class="flex items-center gap-2">
+          <span
+            class="inline-block w-4 h-4 bg-blue-100 dark:bg-blue-900/30 rounded-full"
+          ></span>
+          <span class="text-gray-700 dark:text-gray-300">Technology</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span
+            class="inline-block w-4 h-4 bg-teal-100 dark:bg-teal-900/30 rounded-full"
+          ></span>
+          <span class="text-gray-700 dark:text-gray-300">Tag</span>
+        </div>
+      </div>
+
       <div class="flex flex-wrap gap-3">
         {
           sortedTags.map((tag) => (