51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import React from 'react';
|
|
import { Heart, MapPin } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
// import { Link } from 'next/navigation';
|
|
|
|
interface ListingCardProps {
|
|
id: string;
|
|
title: string;
|
|
price?: string;
|
|
location?: string;
|
|
image?: string;
|
|
date?: string;
|
|
}
|
|
|
|
export default function ListingCard({ id, title, price, location, image, date }: ListingCardProps) {
|
|
return (
|
|
<Link href={`/adt/${id}`} className="block">
|
|
<div className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="relative aspect-[4/3]">
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="w-full h-full object-cover rounded-t-xl"
|
|
/>
|
|
<button
|
|
className="absolute top-3 right-3 p-2 bg-white/90 rounded-full hover:bg-white"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
// Handle favorite toggle
|
|
}}
|
|
>
|
|
<Heart className="h-5 w-5 text-gray-600" />
|
|
</button>
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h3 className="text-lg font-medium text-gray-900 line-clamp-2">{title}</h3>
|
|
<span className="text-lg font-semibold text-indigo-600">{price}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<MapPin className="h-4 w-4" />
|
|
<span>{location}</span>
|
|
</div>
|
|
<div className="mt-2 text-sm text-gray-400">{date}</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |