116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
// "use client"
|
|
|
|
import React from 'react';
|
|
// import { useParams } from 'next/navigation';
|
|
import { MapPin, Calendar, Phone, MessageCircle, Share2, Flag, Heart } from 'lucide-react';
|
|
import { prisma } from '@/prisma/prisma-client';
|
|
import { notFound } from 'next/navigation';
|
|
import { ShowNumberModal } from '@/components/shared/modals/show-number';
|
|
|
|
type Params = Promise<{ id: string }>
|
|
|
|
export default async function AdtPage(props: { params: Params }) {
|
|
// const [ openShowNumberModal, setOpenShowNumberModal ] = React.useState(false)
|
|
const params = await props.params;
|
|
|
|
const adt = await prisma.adt.findFirst({
|
|
where: {
|
|
id: Number(params.id),
|
|
},
|
|
include: {
|
|
user: true
|
|
}
|
|
})
|
|
|
|
if (!adt) {
|
|
return notFound();
|
|
}
|
|
|
|
const user = adt.user
|
|
|
|
// const { id } = params();
|
|
// const adt = adts.find(l => l.id === id) || adts[0];
|
|
|
|
return (
|
|
<>
|
|
{/* <ShowNumberModal open={openShowNumberModal} onClose={() => setOpenShowNumberModal(false)} /> */}
|
|
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
<img src={String(adt.image)} alt={adt.title} className="w-full h-[400px] object-cover" />
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<h1 className="text-2xl font-semibold">{adt.title}</h1>
|
|
<span className="text-2xl font-bold text-indigo-600">{adt.price}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-gray-500 mb-6">
|
|
<div className="flex items-center gap-1">
|
|
<MapPin className="h-5 w-5" />
|
|
<span>{adt.location}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Calendar className="h-5 w-5" />
|
|
<span>{String(adt.createdAt)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="font-semibold text-lg mb-3">Description</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
{adt.description}
|
|
</p>
|
|
|
|
<div className="flex gap-3">
|
|
<button className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 hover:bg-gray-50">
|
|
<Share2 className="h-5 w-5" />
|
|
<span>Share</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 hover:bg-gray-50">
|
|
<Flag className="h-5 w-5" />
|
|
<span>Report</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white rounded-xl shadow-sm p-6 sticky top-24">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100"
|
|
alt="Seller"
|
|
className="w-12 h-12 rounded-full"
|
|
/>
|
|
<div>
|
|
<h3 className="font-semibold">{user?.name}</h3>
|
|
<p className="text-sm text-gray-500">Member {String(user?.createdAt)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
// onClick={() => setOpenShowNumberModal(true)}
|
|
className="w-full flex items-center justify-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
|
|
>
|
|
<Phone className="h-5 w-5" />
|
|
<span>Show Phone Number</span>
|
|
</button>
|
|
<button className="w-full flex items-center justify-center gap-2 bg-white border border-indigo-600 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-50">
|
|
<MessageCircle className="h-5 w-5" />
|
|
<span>Send Message (In development)</span>
|
|
</button>
|
|
<button className="w-full flex items-center justify-center gap-2 bg-white border border-gray-200 px-4 py-2 rounded-lg hover:bg-gray-50">
|
|
<Heart className="h-5 w-5" />
|
|
<span>Save to Favorites (In development)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
} |