minor changes

src/ButtonGroup.svelte

@@ -22,8 +22,8 @@
        relative inline-flex flex-nowrap items-center px-4 py-2 
       {i == 0 && 'rounded-l-md'}
       {i == tabs.length-1 && 'rounded-r-md'} 
-      border border-indigo-500  text-sm font-medium focus:z-10 focus:outline-none 
-      {currentlySelected === i? 'bg-indigo-700 text-white' : 'bg-gray-100 text-gray-800'}
+      border border-gray-300  text-sm font-medium focus:z-10 focus:outline-none 
+      {currentlySelected === i? 'bg-green-800 text-white' : 'bg-gray-100 text-gray-800'}
      "
   >
      {tab}

src/ItemCard.svelte

@@ -2,7 +2,7 @@
     export let item;
 </script>
 
-<a class="flex flex-col mb-8 bg-indigo-700 justify-center overflow-hidden" href="#/item/{item.rowid}">
+<a class="flex flex-col mb-8 gradient justify-center overflow-hidden" href="#/item/{item.rowid}">
   <div class="flex justify-center">
     <img class="h-64 max-w-sm object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105" 
       src={item.image} alt="{item.name}">
@@ -11,3 +11,9 @@
 </a>
 
 
+<style>
+  .gradient{
+      background-color: #8BC6EC;
+background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
+  }
+</style>

src/ItemDetail.svelte

@@ -1,6 +1,7 @@
 <script>
     import ButtonGroup from "./ButtonGroup.svelte";
     import { bookmarks } from "./stores.js"
+    import Icon from "./tailwindui/Icon.svelte"
 
     export let itemid;
     let item;
@@ -24,13 +25,14 @@
 
 {#if item}
   <main class="px-12 py-10">
+    <h3 class="py-2 mb-5"><a href={"#/topic/" + item.topics} class="font-bold text-violet-800">{item.topics}</a></h3>
     <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
       <!-- book image  -->
       <div class="flex-nowrap">
-        <img class=" mr-6 mb-6 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
+        <img class="mr-6 mb-6 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
       </div>
       <!-- book details  -->
-      <div class="sm:ml-6 md:ml-0 lg:ml-6 flex w-full flex-col justify-between">
+      <div class="flex w-full flex-col justify-between">
         <!-- title, sub title, author  -->
         <section>
           <h1 class="text-2xl">{item.name}</h1>
@@ -50,9 +52,11 @@
           
 
           <div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-400 text-gray-800"> Book </span>
-
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-400 text-gray-800"> Video </span>
+            {#each item.links.split(";") as type}
+            <a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-violet-800 text-gray-50 border" target="_blank"> {type.split("|")[0]} 
+              <span class="ml-0.5"><Icon kind="link"/></span>
+            </a>
+            {/each}
           </div>
         </div>
       </div>

src/TopicDetail.svelte

@@ -21,3 +21,4 @@
     {/each}
 </div>
 
+

src/TopicList.svelte

@@ -2,5 +2,5 @@
     import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
 </script>
 
+<TopicMasonryGrid />
 
-<TopicMasonryGrid />

src/TopicMasonryGrid.svelte

@@ -83,7 +83,7 @@
 
 <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
   {#each [...map.entries()] as parent}
-  <div class="bg-white rounded-lg shadow-lg p-4 break-inside-avoid mb-4">
+  <div class="bg-white rounded-lg shadow-lg p-4 break-inside-avoid mb-4 gradient">
     <a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
   
     <div class="mt-2 flex flex-wrap text-sm text-gray-900">
@@ -95,3 +95,10 @@
   {/each}
 </div>
 
+<style>
+    .gradient{
+        background-color: #8BC6EC;
+background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
+    }
+</style>
+

src/tailwindui/AppShell.svelte

@@ -123,7 +123,7 @@
         </div>
       </div>
   
-      <main class="bg-gray-100">
+      <main class="">
         <div class="py-6">
           <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
             <slot></slot>

src/tailwindui/Icon.svelte

@@ -28,4 +28,8 @@
           <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
           </svg>
+{:else if kind === "link"}
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
+            </svg>        
 {/if}