大海
53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Input } from "@/components/ui/Input";
|
|
|
|
const mockHospitals = [
|
|
{ id: "h1", name: "宠颐生动物医院", address: "朝阳区建国路88号", phone: "010-88886666", rating: 4.8, distance: 1.2, services: ["疫苗", "体检", "手术", "美容"] },
|
|
{ id: "h2", name: "瑞鹏宠物医院", address: "海淀区中关村大街1号", phone: "010-66668888", rating: 4.6, distance: 2.8, services: ["急诊", "住院", "化验"] },
|
|
{ id: "h3", name: "佳雯宠物诊所", address: "西城区金融街16号", phone: "010-55556666", rating: 4.5, distance: 3.5, services: ["疫苗", "驱虫", "体检"] },
|
|
];
|
|
|
|
export default function HospitalPage() {
|
|
const [search, setSearch] = useState("");
|
|
|
|
const filtered = mockHospitals.filter(h =>
|
|
h.name.includes(search) || h.address.includes(search)
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-800">附近医院</h1>
|
|
<p className="text-sm text-gray-500 mt-1">查找附近的宠物医院</p>
|
|
</div>
|
|
|
|
<Input placeholder="搜索医院名称或地址..." value={search} onChange={e => setSearch(e.target.value)} />
|
|
|
|
<div className="space-y-3">
|
|
{filtered.map(h => (
|
|
<Card key={h.id}>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500 flex-shrink-0">🏥</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="font-medium text-gray-800 truncate">{h.name}</h3>
|
|
<span className="text-xs px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded flex-shrink-0">⭐ {h.rating}</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">{h.address}</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">{h.distance}km · {h.phone}</p>
|
|
<div className="flex gap-1 mt-2">
|
|
{h.services.map(s => <span key={s} className="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded">{s}</span>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|