# urbanprosper
thailand real estate
```tsx
import Image from 'next/image';
import { MapPin, Bed, Bath, Maximize } from 'lucide-react'; // ใช้ไอคอนจาก lucide-react

interface PropertyProps {
  title: string;
  price: number;
  location: string;
  beds: number;
  baths: number;
  sqm: number;
  imageUrl: string;
}

export default function PropertyCard({ title, price, location, beds, baths, sqm, imageUrl }: PropertyProps) {
  return (
    <div className="group overflow-hidden rounded-2xl bg-white shadow-md transition-all hover:shadow-xl">
      {/* ส่วนรูปภาพ พร้อม Hover Effect */}
      <div className="relative h-64 w-full overflow-hidden">
        <Image
          src={imageUrl}
          alt={title}
          fill
          className="object-cover transition-transform duration-300 group-hover:scale-110"
        />
        <div className="absolute top-4 left-4 rounded-lg bg-blue-600 px-3 py-1 text-sm font-semibold text-white">
          ขายด่วน
        </div>
      </div>

      {/* รายละเอียด */}
      <div className="p-5">
        <h3 className="mb-1 text-xl font-bold text-gray-800">{title}</h3>
        <p className="mb-4 flex items-center text-sm text-gray-500">
          <MapPin size={16} className="mr-1" /> {location}
        </p>
        
        <div className="mb-4 flex justify-between border-y border-gray-100 py-3 text-gray-600">
          <div className="flex items-center gap-1">
            <Bed size={18} /> <span className="text-sm">{beds} นอน</span>
          </div>
          <div className="flex items-center gap-1">
            <Bath size={18} /> <span className="text-sm">{baths} น้ำ</span>
          </div>
          <div className="flex items-center gap-1">
            <Maximize size={18} /> <span className="text-sm">{sqm} ตร.ม.</span>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-2xl font-bold text-blue-600">
            ฿{price.toLocaleString()}
          </span>
          <button className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700">
            ดูรายละเอียด
          </button>
        </div>
      </div>
    </div>
  );
}
```

---

### 2. หน้าแสดงรายการหลัก (`app/properties/page.tsx`)

```tsx
import PropertyCard from '@/components/PropertyCard';

const mockData = [
  {
    id: 1,
    title: "โมเดิร์นวิลล่า สุขุมวิท 101",
    price: 12500000,
    location: "พระโขนง, กรุงเทพฯ",
    beds: 4,
    baths: 3,
    sqm: 250,
    imageUrl: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c"
  },
  {
    id: 2,
    title: "คอนโดหรู วิวแม่น้ำ",
    price: 5200000,
    location: "บางคอแหลม, กรุงเทพฯ",
    beds: 1,
    baths: 1,
    sqm: 45,
    imageUrl: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750"
  },
  // เพิ่มข้อมูลอื่นๆ ตามต้องการ...
];

export default function PropertiesPage() {
  return (
    <main className="min-h-screen bg-gray-50 p-8">
      <div className="mx-auto max-w-7xl">
        <header className="mb-10">
          <h1 className="text-3xl font-extrabold text-gray-900">รายการอสังหาริมทรัพย์</h1>
          <p className="text-gray-600">พบประกาศทั้งหมด {mockData.length} รายการในพื้นที่ของคุณ</p>
        </header>

        {/* Responsive Grid */}
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {mockData.map((item) => (
            <PropertyCard key={item.id} {...item} />
          ))}
        </div>
      </div>
    </main>
  );
}
```