aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/ScheduleTable.astro
blob: ff138276c2dca666f04a830cc575a391954237f4 (plain)
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
---
// 行事予定の一覧表。データは src/data/schedule/*.json から読む。
// セルの中身は HTML(リンクを含む)としてそのまま出力する。
import meetings from '@/data/schedule/meetings.json';
import events from '@/data/schedule/events.json';

type Row = { date: string; title: string; place: string; note: string; source: string };
type TableData = { columns: string[]; rows: Row[] };

const { variant, rows } = Astro.props as { variant: 'meeting' | 'event'; rows?: Row[] };
const base: TableData = (variant === 'meeting' ? meetings : events) as TableData;
// rows を渡された場合はその行だけを表示する(月別アーカイブ用)
const data: TableData = rows ? { columns: base.columns, rows } : base;
---

<table>
  <thead>
    <tr>{data.columns.map((column) => <th>{column}</th>)}</tr>
  </thead>
  <tbody>
    {
      data.rows.map((row) => (
        <tr>
          <td set:html={row.date} />
          <td set:html={row.title} />
          <td set:html={row.place} />
          <td set:html={row.note} />
          <td set:html={row.source} />
        </tr>
      ))
    }
  </tbody>
</table>