Personal Site
Add tab system which can be generated from an array.
Given an array `tabs` with elements in the format `{ id, label, content }`, a labeled radio item will be generated, which, when checked, makes the associated tab display: block, unless overridden by the variable --display.
Currently planning to add an "icon" slot for an imported image or url, and replace content with a component
+52
-1
+52
-1
src/components/home/feeds/Feeds.astro
+52
-1
src/components/home/feeds/Feeds.astro
···
1
1
---
2
-
2
+
const tabs: {
3
+
id: string;
4
+
label: string;
5
+
content: string;
6
+
}[] = [
7
+
{ id: "tab1", label: "Tab 1", content: "Tab 1 Contents" },
8
+
{ id: "tab2", label: "Tab 2", content: "Tab 2 Contents" },
9
+
{ id: "tab3", label: "Tab 3", content: "Tab 3 Contents" },
10
+
{ id: "tab4", label: "Tab 4", content: "Tab 4 Contents" },
11
+
];
3
12
---
4
13
5
14
<section class="feeds">
15
+
<div id="tab-container">
16
+
{
17
+
tabs.map((tab, i) => (
18
+
<label>
19
+
<input
20
+
type="radio"
21
+
name="social-tab"
22
+
data-tab-for={tab.id}
23
+
checked={i === 0}
24
+
/>
25
+
{tab.label}
26
+
</label>
27
+
))
28
+
}
29
+
</div>
6
30
31
+
<div id="tabs">
32
+
{
33
+
tabs.map((tab) => (
34
+
<div class="tab" data-tab={tab.id} id={tab.id}>
35
+
{tab.content}
36
+
</div>
37
+
))
38
+
}
39
+
</div>
7
40
</section>
41
+
42
+
<!-- god i want /ref/ combinators so fuckin bad
43
+
this could be so clean
44
+
`#tab-container :checked /data-tab-for/ .tab` -->
45
+
<style
46
+
set:html={tabs
47
+
.map(
48
+
({ id }) =>
49
+
`#tab-container:has([data-tab-for="${id}"]:checked) ~ #tabs #${id} { display: var(--display, block); }`,
50
+
)
51
+
.join("\n")}
52
+
></style>
53
+
54
+
<style>
55
+
.tab {
56
+
display: none;
57
+
}
58
+
</style>