bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3 import Avatar from '../generic/Avatar.svelte'
4
5 interface Props {
6 href?: string
7 icon?: string
8 title: string
9 detail?: string
10 orientation?: 'vertical' | 'horizontal'
11 children?: Snippet
12 }
13
14 let {
15 href,
16 icon,
17 title,
18 detail,
19 children,
20 orientation = 'horizontal',
21 }: Props = $props()
22</script>
23
24<div
25 class={[
26 'flex gap-2 p-5',
27 orientation == 'horizontal'
28 ? 'flex-row items-center'
29 : 'flex-col items-staRT',
30 ]}
31>
32 <Avatar url={icon} alt={title} width={detail ? 32 : 24} circle={false} />
33 <a class="flex-1 flex flex-col group" {href}>
34 <h3 class="font-medium text-base overflow-hidden text-ellipsis leading-5">
35 {title}
36 </h3>
37 <p class="text-sm text-slate-600 dark:text-zinc-400">
38 {detail}
39 </p>
40 </a>
41 <div class="flex flex-row gap-2 items-center">
42 {@render children?.()}
43 </div>
44</div>