action button added

db/items.csv

@@ -4,3 +4,13 @@ sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3
 sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
 sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
 sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history

src/Button.svelte

@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
+  <button type="button" class="relative inline-flex flex-nowrap items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 ">Want to Learn</button>
+  
+  <button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Finished</button>
+</span>

src/Explore.svelte

@@ -1,5 +0,0 @@
-<script>
-
-</script>
-
-<h1 class="text-3xl font-bold">Explore</h1>

src/Home.svelte

@@ -4,11 +4,11 @@
         <h1>
           <span class="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">Coming soon</span>
           <span class="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
-            <span class="block text-gray-900">Data to enrich your</span>
-            <span class="block text-indigo-600">online business</span>
+            <span class="block text-gray-900">LearnAwesome</span>
+            <span class="block text-indigo-600">Humanity's learning map</span>
           </span>
         </h1>
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt sunt.</p>
+        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">Today's learning platforms are not actually learner-centric. They want the students to be locked within their apps & websites, learn ONLY from their own content and their own preferred formats. But the way we learn in 21st century is far too rich. We learn from blogs, podcasts, videos, tweetstorms, livestreams, games, newsletters, infographics, Q&A sites, forums and much more. Discovering the right kind of learning material for YOU at the right time is still too hard.</p>
       </div>
       <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
         <svg class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden" width="640" height="784" fill="none" viewBox="0 0 640 784" aria-hidden="true">

src/ItemCard.svelte

@@ -2,10 +2,12 @@
     export let item;
 </script>
 
-<a class="flex flex-col mb-8" href="#/item/{item.rowid}">
-    <img class="h-64 w-44 mr-6 mb-6 float-left border border-purple-200 rounded-md shadow-md md:shadow-xl transform transition ease-out duration-300 hover:scale-105" 
-      src={item.image} alt="">
-    <div class="flex-1 text-base font-semibold text-yellow-400">★ ★ ★ ★ ★</div>
+<a class="flex flex-col mb-8 bg-indigo-700 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}">
+  </div>
+    <span class="flex-1 text-base font-semibold text-yellow-400">★ ★ ★ ★ ★</span>
 </a>
 
 

src/ItemDetail.svelte

@@ -1,4 +1,6 @@
 <script>
+    import WantToLearnButton from './WantToLearnButton.svelte';
+    import Button from "./Button.svelte";
     export let itemid;
     let item;
 
@@ -12,13 +14,13 @@
 
 {#if item}
   <main class="px-12 py-10">
-    <div class="mb-10 flex h-64">
+    <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
       <!-- book image  -->
-      <div>
-        <img class="float-left mr-6 mb-6 aspect-auto transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
+      <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="" />
       </div>
       <!-- book details  -->
-      <div class="ml-6 flex w-full flex-col justify-between">
+      <div class="sm:ml-6 md:ml-0 lg:ml-6 flex w-full flex-col justify-between">
         <!-- title, sub title, author  -->
         <section>
           <h1 class="text-2xl">{item.name}</h1>
@@ -26,21 +28,28 @@
           <span class="text-sm">{item.creator}</span>
         </section>
         <!-- ratings and upload buttons -->
-        <div class="mt-2 mb-6 flex justify-between">
-          <div>
-            <span class="text-yellow-500">★★★★★</span>
-            <br />
-            <span class="text-sm text-gray-500">333 Ratings</span>
+        <div class="mt-2 mb-6 flex flex-col justify-between">
+          <div class="flex justify-between items-center">
+            <div>
+              <span class="text-yellow-500">★★★★★</span>
+              <br />
+              <span class="text-xs text-gray-500">333 Ratings</span>
+            </div>
+            
+            <Button />
           </div>
-          <div class="flex items-center justify-center gap-3 text-gray-500">
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> Book </span>
+          
 
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-gray-800"> Video </span>
+          <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>
           </div>
         </div>
       </div>
     </div>
     <hr />
+    
     <!-- Description  -->
     <section class="my-8">
       <h2 class="text-base font-bold">Description</h2>
@@ -103,28 +112,57 @@
 
     </div>
     <hr />
-    <!-- Customer review  -->
+    <!-- review  -->
     <section class="my-8">
       <div class="flex justify-between items-center">
-        <h2 class="text-base font-bold">Customer Reviews</h2>
-        <button class="text-xs">See All</button>
+        <h2 class="text-base font-bold">Reviews</h2>
       </div>
       
-      <div class="grid grid-cols-1 md:grid-cols-2 mt-3 gap-2">
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs">
+      <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
           <h3 class="font-semibold">About the book</h3>
           <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div>
+          <div class="mt-3">
             <span>★★★★★</span>
             <span class="ml-2">Sep 22, 2021</span>
             <span class="ml-2">Priyanka Trivedi</span>
           </div>
         </article>
   
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs">
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
           <h3 class="font-semibold">About the book</h3>
           <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
             <span>★★★★★</span>
             <span class="ml-2">Sep 22, 2021</span>
             <span class="ml-2">Priyanka Trivedi</span>
@@ -134,12 +172,13 @@
     </section>
     <hr />
     <!-- more books by same author  -->
-    <section class="my-8 overflow-hidden">
+
+    <!-- <section class="my-8 overflow-hidden">
       <div class="flex justify-between items-center">
         <h2 class="text-base font-bold">More Books by Priyanka Trivedi</h2>
         <button class="float-right text-xs hover:underline">See All</button>
       </div>
-      <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
+      <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-auto">
         <div class="shrink-0">
           <div class="" >
             <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
@@ -217,10 +256,13 @@
           </div>
         </div>
       </div>  
+    
     </section>
-    <hr />
+    <hr /> -->
+
     <!-- Also bought  -->
-    <section class="my-8 overflow-hidden">
+
+    <!-- <section class="my-8 overflow-hidden">
       <div class="flex justify-between items-center">
         <h2 class="text-base font-bold">Other items on the same topics</h2>
         <button class="text-xs hover:underline">See All</button>
@@ -276,7 +318,7 @@
           
         </div>
       </div>
-    </section>
+    </section> -->
   </main>
 {:else}
 	<p class="loading">loading...</p>

src/TopicDetail.svelte

@@ -15,7 +15,7 @@
 
 <TopicMasonryGrid {topicid}/>
 
-<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
     {#each items as item}
         <ItemCard {item}/>
     {/each}

src/TopicMasonryGrid.svelte

@@ -38,7 +38,7 @@
 {#if [...tree.keys()].length > 0}
 <Masonry gridGap={'0.75rem'}>
   {#each [...tree.keys()] as parent}
-  <div class="bg-white rounded-lg px-4 py-4 shadow-lg focus:outline-none">
+  <div class=" rounded-lg px-4 py-4 shadow focus:outline-none">
     <a href={"#/topic/" + parent.id}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ parent.display_name }</span></a>
   
       <div class="mt-2 flex flex-wrap text-sm text-gray-900">

src/WantToLearnButton.svelte

@@ -0,0 +1,18 @@
+<script>
+  
+</script>
+
+
+<button class="inline-flex shrink-0 justify-center items-center bg-purple-200 text-purple-900 border border-purple-300 rounded-md divide-x divide-purple-300 w-56">
+  <div class="flex px-3 py-2" >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+    </svg>
+    <span class="ml-1">Want to Learn</span>
+  </div>
+  <div class="px-3 py-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+  </div>
+</button>