<script> /** * @typedef BadgeData * @property {string} href * @property {string} src * @property {string} alt */ /** * @typedef TagData * @property {string} content * @property {import('./Tag.svelte').TagType} tag_type */ import Tag from "./Tag.svelte"; /** * @type {string} */ export let title; /** * @type {string} */ export let url; /** * @type {string} */ export let image; /** * @type {BadgeData[]} */ export let badges; /** * @type {TagData[]} */ export let tags </script> <div class="w-full space-y-2 bg-white p-4 shadow-lg library-card"> <div class="mb-4 flex items-center"> <div class="mr-4 flex h-12 w-12 items-center justify-center rounded-md bg-orange-500 text-white"> {#if image} <img class="h-full w-full rounded-md" src="{image}" /> {/if} </div> <div> <h2 class="text-xl font-bold text-gray-800">{title}</h2> <a class="font-bold text-red-500 hover:text-red-400 hover:underline" href="https://{url}">{url}</a> </div> </div> {#if badges} <div class="flex flex-wrap space-x-2"> {#each badges as badge} <a href="{badge.href}"><img alt="{badge.alt}" src="{badge.src}" /></a> {/each} </div> {/if} <div class="relative"> <div class="absolute inset-0 flex items-center" aria-hidden="true"> <div class="w-full border-t border-gray-300"></div> </div> <div class="relative flex justify-start"> <span class="bg-white pr-3 text-base font-semibold leading-6 text-gray-900">About</span> </div> </div> <p class="text-gray-600"><slot /></p> <div class="flex flex-wrap"> {#each tags as tag} <Tag tag_type="{tag.tag_type}" content="{tag.content}" /> {/each} </div> </div>