-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEventCard.svelte
More file actions
60 lines (54 loc) · 1.61 KB
/
Copy pathEventCard.svelte
File metadata and controls
60 lines (54 loc) · 1.61 KB
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
<script lang="ts">
interface Props {
event: {
arrangementId: string;
title: string;
descriptionHtml: string;
date: Date;
location: string;
cancelled: boolean;
openForSubmissions: boolean;
submissionDeadline: Date | null;
};
}
let { event }: Props = $props();
const dateStr = $derived(new Date(event.date).toLocaleDateString('nb-NO', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric'
}));
const isPast = $derived(new Date(event.date) < new Date());
const submissionsOpen = $derived(
event.openForSubmissions &&
event.submissionDeadline &&
new Date(event.submissionDeadline) > new Date()
);
</script>
<a href="/arrangementer/{event.arrangementId}" class="card event-card">
{#if event.cancelled}
<span class="badge badge-error">Avlyst</span>
{:else if isPast}
<span class="badge badge-warning">Gjennomført</span>
{:else}
<span class="badge badge-success">Kommende</span>
{/if}
{#if submissionsOpen}
<span class="badge badge-info">Åpen for innlegg</span>
{/if}
<h3>{event.title}</h3>
<p class="event-meta">{dateStr} — {event.location}</p>
<div class="event-desc">{@html event.descriptionHtml}</div>
</a>
<style>
.event-card { display: block; text-decoration: none; color: inherit; }
.event-card h3 { margin: 0.75rem 0 0.25rem; }
.event-meta { color: var(--color-accent); font-size: 0.95rem; margin-bottom: 0.5rem; }
.event-desc { color: var(--color-text-muted); font-size: 0.95rem; }
.event-desc :global(p) { margin: 0; }
.event-desc :global(p + p) { margin-top: 0.5rem; }
.badge-info {
background: rgba(126, 200, 200, 0.2);
color: #7ec8c8;
}
</style>