blob: 23b052f07e80ea1730d9a12a6775df36655643df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import { useLoaderData, Link } from "react-router";
import type { Route } from "./+types/venues";
import { getVenues } from "~/lib/db.server";
import { getScraperIds } from "~/lib/venue-meta.server";
export async function loader(_: Route.LoaderArgs) {
const venues = getVenues();
const scraperIds = getScraperIds();
return { venues, scraperIds };
}
export default function Venues() {
const { venues, scraperIds: scraperIdList } = useLoaderData<typeof loader>();
const scraperIds = new Set(scraperIdList);
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
<header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
🎸 東京ライブハウス
</Link>
<nav className="flex gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/venues" className="text-white font-medium">会場一覧</Link>
</nav>
</header>
<main className="max-w-4xl mx-auto px-4 py-10">
<div className="mb-8">
<h1 className="text-2xl font-bold">会場一覧</h1>
<p className="mt-1 text-sm text-gray-400">
現在 {scraperIdList.length} 会場のスクレイパーが登録されています。
新しい会場を追加するには <code className="bg-gray-800 px-1 rounded">app/scrapers/</code> に
モジュールを追加して <code className="bg-gray-800 px-1 rounded">index.ts</code> に登録してください。
</p>
</div>
{venues.length === 0 ? (
<p className="text-gray-500">まだ会場データがありません。「情報を更新」してください。</p>
) : (
<div className="grid gap-4 sm:grid-cols-2">
{venues.map((v) => (
<Link
key={v.id}
to={`/events?venue_id=${v.id}`}
className="flex items-center justify-between rounded-xl bg-gray-800/60 p-4 hover:bg-gray-800 transition-colors border border-gray-700/50"
>
<div>
<p className="font-semibold">{v.name}</p>
{v.area && <p className="text-sm text-gray-400">{v.area}</p>}
{scraperIds.has(v.id) && (
<span className="mt-1 inline-block rounded-full bg-emerald-700/40 px-2 py-0.5 text-xs text-emerald-300">
スクレイパー登録済
</span>
)}
</div>
<span className="text-2xl font-bold text-gray-500">
{v.event_count ?? 0}
<span className="text-sm font-normal ml-1">件</span>
</span>
</Link>
))}
</div>
)}
</main>
</div>
);
}
|
