blob: 30800fb6310ecfd1d3f4a5b7b5da6c059035ed7a (
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
|
import { Link } from "react-router";
import type { Event } from "~/lib/db.server";
interface Props {
event: Event;
}
export default function EventListRow({ event }: Props) {
const formattedDate = formatDate(event.date);
const timeLabel = buildTimeLabel(event.open_time, event.start_time);
return (
<Link
to={`/events/${event.id}`}
className="group flex items-center gap-3 rounded-lg px-4 py-3 bg-gray-800/40 border border-gray-700/30 hover:border-indigo-500/50 hover:bg-gray-800/70 transition-all text-sm"
>
{/* Date */}
<span className="w-24 sm:w-32 shrink-0 text-xs text-gray-400 tabular-nums">
{formattedDate}
{timeLabel && (
<span className="block text-gray-600 text-[11px]">{timeLabel}</span>
)}
</span>
{/* Venue */}
<span className="hidden sm:inline-flex w-28 shrink-0 truncate rounded-full bg-gray-700/60 px-2 py-0.5 text-xs text-gray-300">
{event.venue_name}
{event.venue_area ? `（${event.venue_area}）` : ""}
</span>
{/* Title + artist */}
<span className="flex-1 min-w-0">
<span className="block truncate font-medium text-gray-100 group-hover:text-indigo-300 transition-colors">
{event.title}
</span>
{event.artist && (
<span className="block truncate text-xs text-indigo-300/80">
{event.artist}
</span>
)}
</span>
{/* Price */}
{event.price ? (
<span className="hidden sm:block shrink-0 text-xs text-emerald-400">¥{event.price}</span>
) : (
<span className="hidden sm:block shrink-0 w-16" />
)}
</Link>
);
}
function formatDate(iso: string): string {
const [y, m, d] = iso.split("-");
const days = ["日", "月", "火", "水", "木", "金", "土"];
const dayIdx = new Date(`${iso}T00:00:00`).getDay();
return `${y}/${m}/${d}（${days[dayIdx]}）`;
}
function buildTimeLabel(open: string | null, start: string | null): string {
const parts: string[] = [];
if (open) parts.push(`OPEN ${open}`);
if (start) parts.push(`START ${start}`);
return parts.join(" / ");
}
|
