summaryrefslogtreecommitdiff
path: root/app/routes/home.tsx
diff options
context:
space:
mode:
authoryyamashita <yyamashita@mosquit.one>2026-05-09 00:27:19 +0900
committeryyamashita <yyamashita@mosquit.one>2026-05-09 00:27:19 +0900
commitb8d24d292d99c8da285092ce923b5e2b546d8f45 (patch)
treec8cde36d7a109dd8eb75b62a6aefd81e80d1f5ee /app/routes/home.tsx
parent859e6d8ed530daac1180c7b03182d9389be084dc (diff)
Implement band/artist management with version history
Full CRUD for bands and artists: UUID + slug URLs, dynamic link editor, band-artist associations with roles, per-edit revision snapshots (message + IP). Add README and CLAUDE.md. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'app/routes/home.tsx')
-rw-r--r--app/routes/home.tsx44
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>
);
}