diff options
Diffstat (limited to 'app/routes/band-by-uuid.tsx')
| -rw-r--r-- | app/routes/band-by-uuid.tsx | 77 |
1 files changed, 23 insertions, 54 deletions
diff --git a/app/routes/band-by-uuid.tsx b/app/routes/band-by-uuid.tsx index 9cb4d33..99a8b5c 100644 --- a/app/routes/band-by-uuid.tsx +++ b/app/routes/band-by-uuid.tsx @@ -26,50 +26,33 @@ const STATUS_LABEL: Record<string, string> = { export default function BandDetail() { const { band, links, artists, latest } = useLoaderData<typeof loader>(); return ( - <main className="max-w-3xl mx-auto px-4 py-8"> - <div className="flex items-start justify-between mb-6"> - <div> - <h1 className="text-2xl font-bold">{band.name}</h1> - <div className="flex items-center gap-3 mt-1 text-sm text-gray-400"> + <main> + <div className="detail-header"> + <div className="detail-info"> + <h1>{band.name}</h1> + <div className="detail-subtitle"> {band.area && <span>{band.area}</span>} <span>{STATUS_LABEL[band.status] ?? band.status}</span> </div> {band.description && ( - <p className="mt-3 text-gray-300 text-sm leading-relaxed">{band.description}</p> + <p className="detail-desc">{band.description}</p> )} </div> - <div className="flex items-center gap-3 text-sm shrink-0 ml-4"> - <Link - to={`/bands/of/${band.id}/history`} - className="text-gray-400 hover:text-gray-200 transition-colors" - > - 履歴 - </Link> - <Link - to={`/bands/of/${band.id}/edit`} - className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors" - > - 編集 - </Link> + <div className="detail-actions"> + <Link to={`/bands/of/${band.id}/history`} className="history">履歴</Link> + <Link to={`/bands/of/${band.id}/edit`} className="edit">編集</Link> </div> </div> {artists.length > 0 && ( - <section className="mb-6"> - <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3"> - メンバー - </h2> - <ul className="space-y-2"> + <section> + <h2>メンバー</h2> + <ul className="member-list"> {artists.map((a) => ( - <li key={a.artist_id} className="flex items-center gap-3 flex-wrap"> - <Link - to={`/artists/of/${a.artist_id}`} - className="text-blue-400 hover:text-blue-300 transition-colors font-medium" - > - {a.artist_name} - </Link> + <li key={a.artist_id}> + <Link to={`/artists/of/${a.artist_id}`}>{a.artist_name}</Link> {a.role && a.role.split(", ").filter(Boolean).map((r, i) => ( - <span key={i} className="text-gray-500 text-xs bg-gray-900 px-1.5 py-0.5 rounded">{r}</span> + <span key={i} className="badge">{r}</span> ))} </li> ))} @@ -78,19 +61,12 @@ export default function BandDetail() { )} {links.length > 0 && ( - <section className="mb-6"> - <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3"> - リンク - </h2> - <ul className="space-y-1.5"> + <section> + <h2>リンク</h2> + <ul className="link-list"> {links.map((l) => ( <li key={l.id}> - <a - href={l.url} - target="_blank" - rel="noopener noreferrer" - className="text-blue-400 hover:text-blue-300 transition-colors text-sm" - > + <a href={l.url} target="_blank" rel="noopener noreferrer"> {LINK_TYPE_LABEL[l.label] ?? l.label} </a> </li> @@ -99,21 +75,14 @@ export default function BandDetail() { </section> )} - <hr className="border-gray-800 my-6" /> - <div className="text-xs text-gray-600 space-y-1 font-mono"> + <hr /> + <div className="meta"> <p>/bands/of/{band.id}</p> <p> - <Link - to={`/bands/named/${band.slug}`} - className="hover:text-gray-400 transition-colors" - > - /bands/named/{band.slug} - </Link> + <Link to={`/bands/named/${band.slug}`}>/bands/named/{band.slug}</Link> </p> {latest && ( - <p className="font-sans text-gray-500 mt-2"> - 最終更新: {latest.created_at} — {latest.message} - </p> + <p className="updated">最終更新: {latest.created_at} — {latest.message}</p> )} </div> </main> |