my website at ewancroft.uk
refactor: collapse tags into icon and number
+21
-22
+21
-22
src/lib/components/ui/BlogPostCard.svelte
+21
-22
src/lib/components/ui/BlogPostCard.svelte
···
1
1
<script lang="ts">
2
-
import { ExternalLink } from '@lucide/svelte';
2
+
import { ExternalLink, Tag } from '@lucide/svelte';
3
3
import type { BlogPost } from '$lib/services/atproto';
4
4
import { InternalCard } from '$lib/components/ui';
5
5
import { getPostBadges, getBadgeClasses } from '$lib/helper/badges';
···
45
45
</p>
46
46
{/if}
47
47
48
-
<!-- Timestamp and Tags row -->
49
-
<div class="flex items-end justify-between gap-3 pt-1">
50
-
<!-- Timestamp (left) -->
48
+
<!-- Timestamp -->
49
+
<div class="pt-1">
51
50
<p class="text-xs font-medium text-ink-800 dark:text-ink-100">
52
51
{formatLocalizedDate(post.createdAt, locale)}
53
52
</p>
54
-
55
-
<!-- Tags (right) -->
56
-
{#if post.tags && post.tags.length > 0}
57
-
<div class="flex flex-wrap items-center justify-end gap-1.5">
58
-
{#each post.tags as tag}
59
-
<span
60
-
class="rounded bg-ink-100 px-2 py-0.5 text-xs font-medium text-ink-800 dark:bg-ink-800 dark:text-ink-100"
61
-
>
62
-
#{tag}
63
-
</span>
64
-
{/each}
65
-
</div>
66
-
{/if}
67
53
</div>
68
54
</div>
69
55
70
-
<!-- External Link Icon -->
71
-
<ExternalLink
72
-
class="h-4 w-4 shrink-0 text-ink-700 transition-colors dark:text-ink-200"
73
-
aria-hidden="true"
74
-
/>
56
+
<!-- Right column: External Link Icon and Tags -->
57
+
<div class="flex shrink-0 flex-col items-end justify-between self-stretch gap-2">
58
+
<!-- External Link Icon -->
59
+
<ExternalLink
60
+
class="h-4 w-4 text-ink-700 transition-colors dark:text-ink-200"
61
+
aria-hidden="true"
62
+
/>
63
+
64
+
<!-- Tags -->
65
+
{#if post.tags && post.tags.length > 0}
66
+
<div class="flex items-center gap-1.5 rounded bg-ink-100 px-2 py-0.5 dark:bg-ink-800">
67
+
<Tag class="h-3 w-3 text-ink-700 dark:text-ink-200" aria-hidden="true" />
68
+
<span class="text-xs font-medium text-ink-800 dark:text-ink-100">
69
+
{post.tags.length}
70
+
</span>
71
+
</div>
72
+
{/if}
73
+
</div>
75
74
{/snippet}
76
75
</InternalCard>