app/routes/band-index.tsx


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 { Link, useLoaderData } from "react-router";
import { listBands } from "~/lib/db.server";

export function loader() {
  return { bands: listBands() };
}

export default function BandIndex() {
  const { bands } = useLoaderData<typeof loader>();
  return (
    <main>
      <div className="page-header">
        <h1>Bands</h1>
        <Link to="/bands/new">+ Band</Link>
      </div>

      {bands.length === 0 ? (
        <p className="muted">
          バンドがまだありません。{" "}
          <Link to="/bands/new">追加する</Link>
        </p>
      ) : (
        <ul className="band-list">
          {bands.map((band) => (
            <li key={band.id}>
              <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
              {band.status === "hiatus" && (
                <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span>
              )}
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}