diff options
Diffstat (limited to 'app/routes/artist-by-uuid.tsx')
| -rw-r--r-- | app/routes/artist-by-uuid.tsx | 75 |
1 files changed, 20 insertions, 55 deletions
diff --git a/app/routes/artist-by-uuid.tsx b/app/routes/artist-by-uuid.tsx index 9b8a4b1..6eb06a7 100644 --- a/app/routes/artist-by-uuid.tsx +++ b/app/routes/artist-by-uuid.tsx @@ -14,42 +14,23 @@ export async function loader({ params }: LoaderFunctionArgs) { export default function ArtistDetail() { const { artist, links, bands, 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"> - <h1 className="text-2xl font-bold">{artist.name}</h1> - <div className="flex items-center gap-3 text-sm shrink-0 ml-4"> - <Link - to={`/artists/of/${artist.id}/history`} - className="text-gray-400 hover:text-gray-200 transition-colors" - > - 履歴 - </Link> - <Link - to={`/artists/of/${artist.id}/edit`} - className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors" - > - 編集 - </Link> + <main> + <div className="detail-header"> + <h1>{artist.name}</h1> + <div className="detail-actions"> + <Link to={`/artists/of/${artist.id}/history`} className="history">履歴</Link> + <Link to={`/artists/of/${artist.id}/edit`} className="edit">編集</Link> </div> </div> {bands.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"> {bands.map((b) => ( - <li key={b.band_id} className="flex items-center gap-3"> - <Link - to={`/bands/of/${b.band_id}`} - className="text-blue-400 hover:text-blue-300 transition-colors font-medium" - > - {b.band_name} - </Link> - {b.role && ( - <span className="text-gray-400 text-sm">{b.role}</span> - )} + <li key={b.band_id}> + <Link to={`/bands/of/${b.band_id}`}>{b.band_name}</Link> + {b.role && <span className="muted">{b.role}</span>} </li> ))} </ul> @@ -57,42 +38,26 @@ export default function ArtistDetail() { )} {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" - > - {l.label} - </a> + <a href={l.url} target="_blank" rel="noopener noreferrer">{l.label}</a> </li> ))} </ul> </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>/artists/of/{artist.id}</p> <p> - <Link - to={`/artists/named/${artist.slug}`} - className="hover:text-gray-400 transition-colors" - > - /artists/named/{artist.slug} - </Link> + <Link to={`/artists/named/${artist.slug}`}>/artists/named/{artist.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> |