Dev-Encyclopedia/src/components/CardList.astro at fc3e0fcde235bfb26d67e5b601e8fae37938e9a4 · KC900201/Dev-Encyclopedia · GitHub

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
---
import type { CardProps } from "../types"

const { terms: cards } = Astro.props

const paginateOptions = [
  { label: "10", value: 10 },
  { label: "20", value: 20 },
  { label: "30", value: 30 },
  { label: "40", value: 40 }
]
---

<!-- Pagination component -->
<div class="pagination-bar">
  <div class="pagination-filter">
    <select class="select" id="pagination-select">
      {
        paginateOptions.map((option) => (
          <option value={option.value} id={`paginate-${option.label}`}>
            {option.label}
          </option>
        ))
      }
    </select>
  </div>

  <button class="button navigation-button" id="prev-button">
    <i class="bi bi-arrow-left-circle"></i>
  </button>

  <button class="button navigation-button" id="next-button">
    <i class="bi bi-arrow-right-circle"></i>
  </button>
</div>

<div class="card-container" id="cardContainer">
  {
    cards.map((card: CardProps) => (
      <div
        class="card"
        data-title={card.data.title}
        data-description={card.data.description.texts.join("\n\n")}
        data-image-url={card.data.description.image}
        data-resource-url={card.data.description.references[0]}
        data-categories={(card.data.categories || []).join(", ")}
      >
        <div class="card-title">{card.data.title}</div>
        <div class="card-subtext">{card.data.subtext}</div>
        <button class="explain-button">Explain</button>
      </div>
    ))
  }
</div>