1 files changed, 41 insertions, 3 deletions
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 03ae39a..3df4ab5 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,8 +1,46 @@
+import { Link, useLoaderData } from "react-router";
+import { listBands } from "~/lib/db.server";
+
+export function loader() {
+  return { bands: listBands() };
+}
+
 export default function Home() {
+  const { bands } = useLoaderData<typeof loader>();
   return (
-    <main className="container mx-auto px-4 py-16 text-center">
-      <h1 className="text-4xl font-bold tracking-tight">whois.band</h1>
-      <p className="mt-4 text-gray-400">Band identification service. Coming soon.</p>
+    <main className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold">Bands</h1>
+        <Link to="/bands/new" className="text-sm text-blue-400 hover:text-blue-300">
+          + New Band
+        </Link>
+      </div>
+      {bands.length === 0 ? (
+        <p className="text-gray-400">
+          まだバンドがありません。{" "}
+          <Link to="/bands/new" className="text-blue-400 hover:text-blue-300">
+            追加する
+          </Link>
+        </p>
+      ) : (
+        <ul className="divide-y divide-gray-800">
+          {bands.map((band) => (
+            <li key={band.id} className="py-3">
+              <Link
+                to={`/bands/of/${band.id}`}
+                className="flex items-baseline gap-3 group"
+              >
+                <span className="font-medium group-hover:text-blue-300 transition-colors">
+                  {band.name}
+                </span>
+                {band.area && (
+                  <span className="text-gray-400 text-sm">{band.area}</span>
+                )}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
     </main>
   );
 }