kopia lustrzana https://github.com/learn-awesome/learndb
merged latest
Nilesh
commit
9da45c8f82
10
db/items.csv
10
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
|
||||
|
|
|
|||
|
BIN
learn.db
BIN
learn.db
Plik binarny nie jest wyświetlany.
|
|
@ -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>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<h1 class="text-3xl font-bold">Explore</h1>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script>
|
||||
import WantToLearnButton from './WantToLearnButton.svelte';
|
||||
import Button from "./Button.svelte";
|
||||
export let itemid;
|
||||
let item;
|
||||
|
||||
|
|
@ -12,62 +14,42 @@
|
|||
|
||||
{#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 h-64 w-44 transform rounded-md border border-purple-200 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 -->
|
||||
<div>
|
||||
<section>
|
||||
<h1 class="text-2xl">{item.name}</h1>
|
||||
<p class="font text-gray-500">Into Several Rmote Regions of the World</p>
|
||||
<span class="text-sm">{item.creator}</span>
|
||||
</section>
|
||||
<!-- ratings and upload buttons -->
|
||||
<div class="mt-2 mb-6 flex justify-between">
|
||||
<section>
|
||||
<h1 class="text-2xl">{item.name}</h1>
|
||||
<p class="font text-gray-500">Into Several Rmote Regions of the World</p>
|
||||
<span class="text-sm">{item.creator}</span>
|
||||
</section>
|
||||
<!-- ratings and upload buttons -->
|
||||
<div class="mt-2 mb-6 flex flex-col justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<span>★★★★★</span>
|
||||
<span class="text-yellow-500">★★★★★</span>
|
||||
<br />
|
||||
<span class="text-sm text-gray-500">333 Ratings</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-3 text-gray-500">
|
||||
<!-- upload svg -->
|
||||
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
<!-- verticle dots -->
|
||||
<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
<span class="text-xs text-gray-500">333 Ratings</span>
|
||||
</div>
|
||||
|
||||
<Button />
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<!-- action buttons -->
|
||||
<div class="mt-10 grid grid-cols-3 place-items-center gap-1 text-gray-800">
|
||||
<button class="w-full rounded-md border border-gray-300 py-0.5 text-sm shadow">Get</button>
|
||||
<button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Want to Read
|
||||
</button>
|
||||
<button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Sample
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<!-- Description -->
|
||||
<section class="my-8">
|
||||
<h2 class="text-base font-bold">Description</h2>
|
||||
|
|
@ -75,8 +57,8 @@
|
|||
</section>
|
||||
<hr />
|
||||
<!-- details -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x-2 py-5">
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">genre</h3>
|
||||
<!-- book svg -->
|
||||
|
|
@ -89,7 +71,7 @@
|
|||
<span class="text-xs">Fiction</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">released</h3>
|
||||
<span>1729</span>
|
||||
|
|
@ -97,7 +79,7 @@
|
|||
<span class="text-xs">December 31</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">language</h3>
|
||||
<span>EN</span>
|
||||
|
|
@ -105,7 +87,7 @@
|
|||
<span class="text-xs">English</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">Length</h3>
|
||||
<span>209</span>
|
||||
|
|
@ -113,14 +95,14 @@
|
|||
<span class="text-xs">Pages</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<h3 class="uppercase text-xs text-gray-400">Publisher</h3>
|
||||
<span></span>
|
||||
<br />
|
||||
<span class="text-xs">Public Domain</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">Size</h3>
|
||||
<span>310.4</span>
|
||||
|
|
@ -130,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>
|
||||
|
|
@ -161,15 +172,16 @@
|
|||
</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-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -180,7 +192,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -191,7 +203,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -202,7 +214,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -213,7 +225,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -224,7 +236,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -235,7 +247,7 @@
|
|||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs gap-1">
|
||||
<h4 class="font-semibold">A Modest Proposal</h4>
|
||||
|
|
@ -244,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>
|
||||
|
|
@ -256,54 +271,54 @@
|
|||
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<div class="" >
|
||||
<img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
</main>
|
||||
{:else}
|
||||
<p class="loading">loading...</p>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<TopicMasonryGrid {topicname}/>
|
||||
|
||||
<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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full bg-gray-100">
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue