-
Notifications
You must be signed in to change notification settings - Fork 7
/
DetailedListView.astro
66 lines (57 loc) · 1.64 KB
/
DetailedListView.astro
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
---
import Icon from "../elements/Icon.astro";
import Tags from "../elements/Tags.astro";
import { normalizeUrl } from "../../util/url";
interface Props {
title: string;
subtitle: string;
items: DetailedListViewItem[];
showArrow?: boolean;
}
const { props } = Astro;
---
<div class="ui detailed list view full width container">
{
(props.title || props.subtitle) && (
<div class="header">
{props.title && <h2>{props.title}</h2>}
{props.subtitle && <div class="sub heading">{props.subtitle}</div>}
</div>
)
}
<div class="ui list view">
{
props.items.map((item) => {
return (
<a
class="list item"
href={normalizeUrl(item.href)}
target={item.isExternal ? "_blank" : undefined}
rel={item.isExternal ? "noreferrer" : undefined}
>
<div class="title and intro">
<div class="title with badge">
<h3 class="title">{item.title}</h3>
<div class="badges">
<Tags tags={item.badges} />
</div>
</div>
<div class="intro">{item.intro}</div>
</div>
<div class="meta">
<div class="item and category">
{item.icon && <Icon variant={item.icon} size={"lg"} />}
<div class="category">{item.category}</div>
</div>
{props.showArrow && (
<div class="arrow container">
<Icon variant="arrow-right" />
</div>
)}
</div>
</a>
);
})
}
</div>
</div>