Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<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>