diff options
Diffstat (limited to 'app/routes/home.tsx')
| -rw-r--r-- | app/routes/home.tsx | 27 |
1 files changed, 9 insertions, 18 deletions
diff --git a/app/routes/home.tsx b/app/routes/home.tsx index 5600645..5aa7de1 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -14,32 +14,23 @@ const STATUS_LABEL: Record<string, string> = { export default function Home() { const { bands } = useLoaderData<typeof loader>(); return ( - <main className="max-w-2xl mx-auto px-6 py-12"> + <main> {bands.length === 0 ? ( - <p className="text-gray-600 text-sm"> + <p className="muted"> バンドがまだありません。{" "} - <Link to="/bands/new" className="underline"> - 追加する - </Link> + <Link to="/bands/new">追加する</Link> </p> ) : ( - <ul className="divide-y divide-gray-900"> + <ul className="band-list"> {bands.map((band) => ( - <li key={band.id} className="py-4 flex items-start justify-between gap-6"> - <div className="min-w-0"> - <Link - to={`/bands/of/${band.id}`} - className="text-gray-100 hover:text-white font-medium" - > - {band.name} - </Link> + <li key={band.id}> + <div className="name-col"> + <Link to={`/bands/of/${band.id}`}>{band.name}</Link> {band.description && ( - <p className="text-gray-500 text-sm mt-0.5 line-clamp-1"> - {band.description} - </p> + <p className="desc">{band.description}</p> )} </div> - <div className="flex items-center gap-4 text-sm text-gray-500 shrink-0 pt-0.5"> + <div className="info"> {band.area && <span>{band.area}</span>} <span>{STATUS_LABEL[band.status] ?? band.status}</span> </div> |