1 files changed, 36 insertions, 0 deletions
diff --git a/app/routes/list-index.tsx b/app/routes/list-index.tsx
new file mode 100644
index 0000000..7995068
--- /dev/null
+++ b/app/routes/list-index.tsx
@@ -0,0 +1,36 @@
+import { Link, useLoaderData } from "react-router";
+import { listBandLists } from "~/lib/db.server";
+
+export function loader() {
+  return { lists: listBandLists() };
+}
+
+export default function ListIndex() {
+  const { lists } = useLoaderData<typeof loader>();
+  return (
+    <main>
+      <div className="page-header">
+        <h1>Lists</h1>
+        <Link to="/lists/new">+ List</Link>
+      </div>
+
+      {lists.length === 0 ? (
+        <p className="muted">
+          リストがまだありません。{" "}
+          <Link to="/lists/new">作成する</Link>
+        </p>
+      ) : (
+        <ul className="band-list">
+          {lists.map((list) => (
+            <li key={list.id}>
+              <Link to={`/lists/of/${list.id}`}>{list.title}</Link>
+              {list.description && (
+                <span className="muted" style={{ fontSize: ".75rem" }}>{list.description}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}