all repos — website @ 4943e2e871623e6e03eed00550a901763aea6d42

Unnamed repository; edit this file 'description' to name the repository.

src/components/Uses.astro (view raw)

 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
 
---
import type { UsesCategory } from "@/types";
import "@/css/uses.css";

interface Props {
	category: UsesCategory;
}

const { category } = Astro.props;
const { items } = category;
---

<details class="uses-category">
    <summary class="meta">
        <div class="meta-content">
            <h3>{category.title}</h3>
            <p>{category.description}</p>
        </div>
        <div class="meta-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>
        </div>
    </summary>
    <div class="items">
        {items.map((item) => (
            <div class="item">
                <div class="label">
                    <h4>{item.label}</h4>
                </div>
                <div class="value">
                    <p>{item.value}</p>
                    {item.subtext && <p class="subtext">{item.subtext}</p>}
                </div>
            </div>
        ))}
    </div>
</details>