108 lines
4.5 KiB
TypeScript
108 lines
4.5 KiB
TypeScript
import { mockDb } from '@/lib/mockDb'
|
||
import { MapPin, Star, ExternalLink } from 'lucide-react'
|
||
|
||
export const metadata = {
|
||
title: 'Marmaris Local Widget'
|
||
}
|
||
|
||
export default async function WidgetPage(props: {
|
||
params: Promise<{ locale: string }>,
|
||
searchParams: Promise<{ neighborhood?: string }>
|
||
}) {
|
||
const { locale } = await props.params
|
||
const searchParams = await props.searchParams
|
||
const neighborhoodSlug = searchParams.neighborhood
|
||
|
||
// Get listings (veritabanında Local Approved mekan olmadığı için şimdilik tümünü çekiyoruz)
|
||
let listings = await mockDb.getListings()
|
||
|
||
if (neighborhoodSlug) {
|
||
const neighborhood = await mockDb.getNeighborhoodBySlug(neighborhoodSlug)
|
||
if (neighborhood) {
|
||
listings = listings.filter(l => l.neighborhoodId === neighborhood.id)
|
||
}
|
||
}
|
||
|
||
// Shuffle and limit to 5
|
||
listings = listings.sort(() => 0.5 - Math.random()).slice(0, 5)
|
||
|
||
return (
|
||
<div className="bg-paper min-h-screen p-4 flex flex-col font-sans">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h1 className="font-heading font-extrabold text-pine text-lg tracking-tight lowercase">
|
||
marmaris local
|
||
</h1>
|
||
<p className="text-[10px] text-shutter font-medium">Yerel Seçimler</p>
|
||
</div>
|
||
<a
|
||
href={`https://marmarislocal.com/${locale}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="bg-pine/5 text-pine hover:bg-pine/10 p-2 rounded-xl transition-colors"
|
||
title="Tümünü Gör"
|
||
>
|
||
<ExternalLink className="w-4 h-4" />
|
||
</a>
|
||
</div>
|
||
|
||
<div className="space-y-3 flex-1 overflow-y-auto pr-1 custom-scrollbar">
|
||
{listings.map(listing => (
|
||
<a
|
||
key={listing.id}
|
||
href={`https://marmarislocal.com/${locale}/${listing.category?.slug}/${listing.slug}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex gap-3 p-3 bg-white border border-pine/5 rounded-2xl hover:border-turquoise hover:shadow-sm transition-all group"
|
||
>
|
||
<div className="w-20 h-20 shrink-0 rounded-xl overflow-hidden bg-stone">
|
||
<img
|
||
src={listing.images?.[0]?.url || 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=400&q=80'}
|
||
alt={listing.nameTr}
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
</div>
|
||
<div className="flex-1 min-w-0 py-1 flex flex-col justify-between">
|
||
<div>
|
||
<h3 className="font-heading font-bold text-pine text-sm truncate group-hover:text-turquoise transition-colors">
|
||
{locale === 'en' ? listing.nameEn || listing.nameTr : locale === 'ru' ? listing.nameRu || listing.nameTr : listing.nameTr}
|
||
</h3>
|
||
<div className="flex items-center gap-1.5 mt-1 text-[10px] font-medium text-shutter">
|
||
<span className="bg-stone-deep px-1.5 py-0.5 rounded-md">
|
||
{locale === 'en' ? listing.category?.nameEn : locale === 'ru' ? listing.category?.nameRu : listing.category?.nameTr}
|
||
</span>
|
||
<span className="flex items-center gap-0.5">
|
||
<MapPin className="w-3 h-3" />
|
||
{locale === 'en' ? listing.neighborhood?.nameEn : locale === 'ru' ? listing.neighborhood?.nameRu : listing.neighborhood?.nameTr}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between mt-2">
|
||
<div className="flex items-center gap-1 bg-yellow-400/10 px-1.5 py-0.5 rounded-md">
|
||
<Star className="w-3 h-3 text-yellow-500 fill-yellow-500" />
|
||
<span className="text-[10px] font-bold text-yellow-600">{(listing.rating || 0).toFixed(1)}</span>
|
||
</div>
|
||
<div className="text-[10px] font-bold tracking-widest text-turquoise">
|
||
{'₺'.repeat(listing.priceRange || 1)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-4 pt-3 border-t border-pine/10 text-center">
|
||
<a
|
||
href={`https://marmarislocal.com/${locale}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-[10px] font-bold text-pine hover:text-turquoise transition-colors"
|
||
>
|
||
marmarislocal.com'da keşfet
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|