41 lines
958 B
Svelte
41 lines
958 B
Svelte
<style lang="scss" src="./NewsletterIssue.scss"></style>
|
|
|
|
<script lang="ts">
|
|
import dayjs from 'dayjs'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
let {
|
|
title,
|
|
issue,
|
|
date,
|
|
link,
|
|
thumbnail,
|
|
size,
|
|
}: {
|
|
title: string
|
|
issue: number
|
|
date: string
|
|
link: string
|
|
thumbnail: { id: string }
|
|
size?: string
|
|
} = $props()
|
|
</script>
|
|
|
|
<div class="issue" class:is-large={size === 'large'}>
|
|
<a href={link} target="_blank" rel="external noopener" tabindex="0">
|
|
<Image
|
|
id={thumbnail.id}
|
|
sizeKey="issue-thumbnail-small"
|
|
width={160} height={112}
|
|
alt="Issue {issue} thumbnail"
|
|
/>
|
|
<dl>
|
|
<dt>Issue #{issue}</dt>
|
|
<dd>
|
|
<p>{title}</p>
|
|
<time>{dayjs(date).format('DD/MM/YYYY')}</time>
|
|
</dd>
|
|
</dl>
|
|
</a>
|
|
</div>
|