first commit

2026-07-12 20:18:55 +03:00
commit cbc59222c2
65 changed files with 16871 additions and 0 deletions
@@ -0,0 +1,146 @@
+import Image from 'next/image'
+import { Link } from '@/i18n/routing'
+import { useLocale } from 'next-intl'
+import { Star } from 'lucide-react'
+
+export interface Gallery {
+  id: string
+  url: string
+}
+
+export interface Category {
+  slug: string
+  nameTr: string
+  nameEn: string
+  nameRu: string
+}
+
+export interface Neighborhood {
+  slug: string
+  nameTr: string
+  nameEn: string
+  nameRu: string
+}
+
+export interface Listing {
+  id: string
+  slug: string
+  categoryId: string
+  neighborhoodId: string
+  nameTr: string
+  nameEn: string
+  nameRu: string
+  descriptionTr: string
+  descriptionEn: string
+  descriptionRu: string
+  address: string
+  priceRange: number
+  rating?: number | null
+  isLocalApproved: boolean
+  images: Gallery[]
+  category?: Category
+  neighborhood?: Neighborhood
+}
+
+export default function ListingCard({ listing }: { listing: Listing }) {
+  const locale = useLocale()
+
+  const name =
+    locale === 'ru'
+      ? listing.nameRu
+      : locale === 'en'
+      ? listing.nameEn
+      : listing.nameTr
+
+  const description =
+    locale === 'ru'
+      ? listing.descriptionRu
+      : locale === 'en'
+      ? listing.descriptionEn
+      : listing.descriptionTr
+
+  const categoryName = listing.category
+    ? locale === 'ru'
+      ? listing.category.nameRu
+      : locale === 'en'
+      ? listing.category.nameEn
+      : listing.category.nameTr
+    : ''
+
+  const neighborhoodName = listing.neighborhood
+    ? locale === 'ru'
+      ? listing.neighborhood.nameRu
+      : locale === 'en'
+      ? listing.neighborhood.nameEn
+      : listing.neighborhood.nameTr
+    : ''
+
+  const priceSymbols = '₺'.repeat(listing.priceRange)
+  const categorySlug = listing.category?.slug || 'isletme'
+
+  const mainImageUrl =
+    listing.images && listing.images.length > 0
+      ? listing.images[0].url
+      : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'
+
+  return (
+    <Link
+      href={`/${categorySlug}/${listing.slug}`}
+      className="group bg-paper rounded-2xl border border-pine/8 overflow-hidden flex flex-col relative shadow-sm hover:shadow-md hover:border-turquoise/35 transition-all duration-300 transform hover:-translate-y-0.5"
+    >
+      {/* Local Approved Seal */}
+      {listing.isLocalApproved && (
+        <div className="absolute top-4 right-4 z-10 w-[52px] h-[52px] rounded-full border-[1.5px] border-turquoise bg-paper flex items-center justify-center -rotate-12 shadow-sm shrink-0">
+          <div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise/60" />
+          <span className="font-mono text-[7px] text-center font-bold text-turquoise tracking-tight leading-[1.1] uppercase">
+            YEREL<br />ONAYLI
+          </span>
+        </div>
+      )}
+
+      {/* Image Preview */}
+      <div className="aspect-[4/3] w-full relative bg-stone-deep overflow-hidden">
+        <Image
+          src={mainImageUrl}
+          alt={name}
+          fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-pine/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      </div>
+
+      {/* Content Details */}
+      <div className="p-5 flex-1 flex flex-col justify-between">
+        <div>
+          {/* Category */}
+          <div className="text-[10px] font-mono text-bougainvillea font-bold uppercase tracking-wider mb-2">
+            {categoryName}
+          </div>
+
+          {/* Title */}
+          <h3 className="font-heading font-bold text-lg text-pine leading-tight mb-2 group-hover:text-turquoise transition-colors line-clamp-1">
+            {name}
+          </h3>
+
+          {/* Neighborhood */}
+          <div className="text-xs text-ink/60 font-medium mb-4">
+            {neighborhoodName}
+          </div>
+        </div>
+
+        {/* Footer info (price range, rating) */}
+        <div className="border-t border-dashed border-pine/12 pt-3.5 mt-auto flex items-center justify-between text-xs font-mono">
+          <span className="text-pine font-semibold">{priceSymbols}</span>
+          
+          {listing.rating && (
+            <div className="flex items-center gap-1 text-gold font-bold">
+              <Star className="w-3.5 h-3.5 fill-gold stroke-gold" />
+              <span>★ {listing.rating.toFixed(1)}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  )
+}