diff options
| author | yyamashita <yyamashita@mosquit.one> | 2026-05-09 00:27:19 +0900 |
|---|---|---|
| committer | yyamashita <yyamashita@mosquit.one> | 2026-05-09 00:27:19 +0900 |
| commit | b8d24d292d99c8da285092ce923b5e2b546d8f45 (patch) | |
| tree | c8cde36d7a109dd8eb75b62a6aefd81e80d1f5ee /app/routes/home.tsx | |
| parent | 859e6d8ed530daac1180c7b03182d9389be084dc (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.tsx | 44 |
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> ); } |
