44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import type { MapData } from './types';
|
|
|
|
export function MapPlacesCard({ data, onExpand }: { data: MapData; onExpand: () => void }) {
|
|
const { query, places } = data;
|
|
|
|
return (
|
|
<div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
|
|
{/* Header */}
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="text-sm">📍</span>
|
|
<span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>地図検索結果: 「{query}」</span>
|
|
<span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{places.length}件</span>
|
|
</div>
|
|
|
|
{/* Place list */}
|
|
<div className="space-y-1.5">
|
|
{places.slice(0, 5).map((p, i) => (
|
|
<div
|
|
key={`${p.lat}-${p.lon}`}
|
|
className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2"
|
|
>
|
|
<span className="text-slate-400 font-mono flex-shrink-0" style={{ fontSize: 11 }}>{i + 1}</span>
|
|
<div className="min-w-0">
|
|
<div className="font-semibold text-slate-800 truncate" style={{ fontSize: 12 }}>{p.name}</div>
|
|
<div className="text-slate-400 truncate" style={{ fontSize: 11 }}>{p.address}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Expand button */}
|
|
<div className="text-center mt-2">
|
|
<button
|
|
onClick={onExpand}
|
|
className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
|
|
style={{ fontSize: 11 }}
|
|
>
|
|
▼ 地図で表示
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|