design: sunum sayfası yeniden tasarlandı
- Koyu gradyan hero header (slate-900), Building2 ikon, ilan sayısı pill - Kartlar: h-52 fotoğraf, hover scale efekti, gölge animasyonu - Status + listing type badge overlay fotoğraf üstünde (backdrop-blur) - Fotoğraf sayısı pill (sağ alt köşe) - Spec pill'leri: emlak tipi, oda, m² - Fiyat büyük ve dominant (2xl), mt-auto ile alta sabitlenmiş - MapPin ikonu konum satırında ve harita linkinde - Footer: Kovak Emlak CRM branding - Süresi dolmuş sunum için iyileştirilmiş boş state
This commit is contained in:
egecankomur
+109
-51
@@ -1,5 +1,6 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { Query } from "node-appwrite";
|
||||
import { Building2, MapPin, Home } from "lucide-react";
|
||||
|
||||
import { DATABASE_ID, TABLES, type Presentation, type Property } from "@/lib/appwrite/schema";
|
||||
import { createAdminClient } from "@/lib/appwrite/server";
|
||||
@@ -31,16 +32,18 @@ export default async function SunumPage({ params }: Props) {
|
||||
|
||||
if (presentation.expiresAt && new Date(presentation.expiresAt) < new Date()) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-2">Sunum Süresi Doldu</h1>
|
||||
<p className="text-gray-500">Bu sunum artık geçerli değil.</p>
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-50">
|
||||
<div className="text-center px-6">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-orange-100 mb-4">
|
||||
<Building2 className="size-8 text-orange-500" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Sunum Süresi Doldu</h1>
|
||||
<p className="text-gray-500">Bu sunum bağlantısı artık geçerli değil.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Increment view count (fire-and-forget)
|
||||
void incrementPresentationViewCount(presentation.$id, presentation.viewCount ?? 0);
|
||||
|
||||
let propertyIds: string[] = [];
|
||||
@@ -56,93 +59,147 @@ export default async function SunumPage({ params }: Props) {
|
||||
const row = await tablesDB.getRow(DATABASE_ID, TABLES.properties, pid);
|
||||
properties.push(row as unknown as Property);
|
||||
} catch {
|
||||
// Property may have been deleted
|
||||
// deleted
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white border-b px-6 py-4">
|
||||
<h1 className="text-xl font-semibold text-gray-800">{presentation.title}</h1>
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Hero header */}
|
||||
<header className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
||||
<div className="max-w-5xl mx-auto px-6 py-10">
|
||||
<div className="flex items-center gap-2 text-slate-400 text-sm mb-5">
|
||||
<Building2 className="size-4" />
|
||||
<span>Emlak Sunumu</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{presentation.title}</h1>
|
||||
{presentation.notes && (
|
||||
<p className="mt-1 text-sm text-gray-500">{presentation.notes}</p>
|
||||
<p className="mt-3 text-slate-300 text-sm max-w-2xl leading-relaxed">
|
||||
{presentation.notes}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-400">{properties.length} ilan</p>
|
||||
<div className="mt-5">
|
||||
<span className="inline-flex items-center gap-1.5 bg-white/10 rounded-full px-3 py-1.5 text-sm">
|
||||
<span className="font-semibold text-white">{properties.length}</span>
|
||||
<span className="text-slate-300">ilan listelendi</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-4 py-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Grid */}
|
||||
<main className="max-w-5xl mx-auto px-4 py-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{properties.map((p) => (
|
||||
<PropertyCard key={p.$id} property={p} />
|
||||
))}
|
||||
{properties.length === 0 && (
|
||||
<p className="col-span-full text-center text-gray-400 py-16">
|
||||
Bu sunumda ilan bulunmuyor.
|
||||
</p>
|
||||
<div className="col-span-full text-center py-20">
|
||||
<Home className="size-10 text-gray-200 mx-auto mb-3" />
|
||||
<p className="text-gray-400">Bu sunumda ilan bulunmuyor.</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t bg-white mt-8 py-6 text-center text-xs text-gray-400">
|
||||
Bu sunum <span className="font-medium text-gray-500">Kovak Emlak CRM</span> tarafından oluşturulmuştur.
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PropertyCard({ property: p }: { property: Property }) {
|
||||
const isExpired = p.status === "satildi" || p.status === "kiralandit";
|
||||
const isSold = p.status === "satildi" || p.status === "kiralandit";
|
||||
const imageIds = parseImageIds(p.imageIds);
|
||||
const coverImageId = imageIds[0];
|
||||
|
||||
const statusStyle: Record<string, string> = {
|
||||
aktif: "bg-green-500/90 text-white",
|
||||
pasif: "bg-gray-500/80 text-white",
|
||||
satildi: "bg-orange-500/90 text-white",
|
||||
kiralandit: "bg-blue-500/90 text-white",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-white rounded-xl border shadow-sm overflow-hidden ${isExpired ? "opacity-60" : ""}`}>
|
||||
<div className="bg-gray-100 h-48 overflow-hidden">
|
||||
<div
|
||||
className={`group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100 flex flex-col ${isSold ? "opacity-70" : ""}`}
|
||||
>
|
||||
{/* Photo */}
|
||||
<div className="relative h-52 bg-slate-100 overflow-hidden shrink-0">
|
||||
{coverImageId ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={getPropertyImagePreviewUrl(coverImageId, 600, 400)}
|
||||
src={getPropertyImagePreviewUrl(coverImageId, 640, 420)}
|
||||
alt={p.title}
|
||||
className="h-full w-full object-cover"
|
||||
className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-4xl text-gray-300">🏠</div>
|
||||
)}
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Home className="size-12 text-slate-200" />
|
||||
</div>
|
||||
<div className="p-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h2 className="font-semibold text-gray-800 text-sm leading-tight">{p.title}</h2>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded whitespace-nowrap font-medium ${
|
||||
p.status === "aktif" ? "bg-green-100 text-green-700" :
|
||||
p.status === "pasif" ? "bg-gray-100 text-gray-600" :
|
||||
"bg-orange-100 text-orange-700"
|
||||
}`}>
|
||||
)}
|
||||
|
||||
{/* Status badge — top left */}
|
||||
<span
|
||||
className={`absolute top-3 left-3 text-xs font-semibold px-2.5 py-1 rounded-full backdrop-blur-sm ${statusStyle[p.status] ?? "bg-gray-500/80 text-white"}`}
|
||||
>
|
||||
{PROPERTY_STATUS_LABELS[p.status] ?? p.status}
|
||||
</span>
|
||||
|
||||
{/* Listing type — top right */}
|
||||
<span className="absolute top-3 right-3 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-900/70 text-white backdrop-blur-sm">
|
||||
{LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}
|
||||
</span>
|
||||
|
||||
{/* Photo count pill */}
|
||||
{imageIds.length > 1 && (
|
||||
<span className="absolute bottom-3 right-3 text-xs bg-black/50 text-white px-2 py-0.5 rounded-full backdrop-blur-sm">
|
||||
{imageIds.length} fotoğraf
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 text-xs text-gray-500">
|
||||
<span>{PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}</span>
|
||||
<span>·</span>
|
||||
<span>{LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}</span>
|
||||
{/* Body */}
|
||||
<div className="p-4 flex flex-col gap-2 flex-1">
|
||||
<h2 className="font-semibold text-gray-900 leading-snug line-clamp-2">{p.title}</h2>
|
||||
|
||||
{/* Location */}
|
||||
{(p.city || p.district || p.neighborhood) && (
|
||||
<div className="flex items-start gap-1 text-xs text-gray-500">
|
||||
<MapPin className="size-3 shrink-0 mt-0.5 text-gray-400" />
|
||||
<span className="line-clamp-1">
|
||||
{[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Spec pills */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
|
||||
{PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}
|
||||
</span>
|
||||
{p.roomCount && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{p.roomCount}</span>
|
||||
</>
|
||||
<span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
|
||||
{p.roomCount}
|
||||
</span>
|
||||
)}
|
||||
{p.netM2 && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{p.netM2} m²</span>
|
||||
</>
|
||||
<span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
|
||||
{p.netM2} m²
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">
|
||||
{[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}
|
||||
</p>
|
||||
|
||||
<p className="text-lg font-bold text-gray-900">
|
||||
{p.price.toLocaleString("tr-TR")} {p.currency ?? "TRY"}
|
||||
{/* Price — pushed to bottom */}
|
||||
<div className="mt-auto pt-2">
|
||||
<p className="text-2xl font-bold text-slate-900 tracking-tight">
|
||||
{p.price.toLocaleString("tr-TR")}
|
||||
<span className="text-sm font-normal text-gray-400 ml-1.5">{p.currency ?? "TRY"}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{p.description && (
|
||||
<p className="text-xs text-gray-500 line-clamp-3">{p.description}</p>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 leading-relaxed">{p.description}</p>
|
||||
)}
|
||||
|
||||
{p.mapLat != null && p.mapLng != null && (
|
||||
@@ -150,9 +207,10 @@ function PropertyCard({ property: p }: { property: Property }) {
|
||||
href={`https://www.google.com/maps?q=${p.mapLat},${p.mapLng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
|
||||
className="mt-1 inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 transition-colors"
|
||||
>
|
||||
📍 Haritada gör
|
||||
<MapPin className="size-3" />
|
||||
Haritada gör
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user