feat: implement dynamic categories, admin category CRUD, fix routing and cleanup
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
|
||||
import { Trash2 } from 'lucide-react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
|
||||
export default function DeleteButton() {
|
||||
const { pending } = useFormStatus()
|
||||
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-stone hover:bg-red-50 text-shutter hover:text-red-500 transition-colors disabled:opacity-50"
|
||||
title="Sil"
|
||||
onClick={(e) => {
|
||||
if (!confirm('Bu kaydı silmek istediğinize emin misiniz?')) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
+23
-23
@@ -1,9 +1,17 @@
|
||||
import { Link } from '@/i18n/routing'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { getTranslations, getLocale } from 'next-intl/server'
|
||||
import { mockDb } from '@/lib/mockDb'
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations('footer')
|
||||
const nav = useTranslations('nav')
|
||||
export default async function Footer() {
|
||||
const categories = await mockDb.getCategories()
|
||||
const locale = await getLocale()
|
||||
const getLocalizedName = (obj: any) => {
|
||||
if (!obj) return ''
|
||||
return locale === 'ru' ? obj.nameRu : locale === 'en' ? obj.nameEn : obj.nameTr
|
||||
}
|
||||
|
||||
const t = await getTranslations('footer')
|
||||
const nav = await getTranslations('nav')
|
||||
|
||||
return (
|
||||
<footer className="bg-pine text-stone/70 border-t border-white/10 pt-16 pb-8 font-sans">
|
||||
@@ -32,23 +40,15 @@ export default function Footer() {
|
||||
{nav('home')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-xs">
|
||||
{categories.map(cat => (
|
||||
<li key={cat.id}>
|
||||
<Link href={`/${cat.slug}`} className="hover:text-turquoise transition-colors">
|
||||
{getLocalizedName(cat)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<Link href="/restoranlar" className="hover:text-turquoise transition-colors">
|
||||
{nav('restaurants')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/apartlar" className="hover:text-turquoise transition-colors">
|
||||
{nav('aparts')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/isletmeler" className="hover:text-turquoise transition-colors">
|
||||
{nav('businesses')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/seckiler" className="hover:text-turquoise transition-colors">
|
||||
<Link href="/collections" className="hover:text-turquoise transition-colors">
|
||||
{nav('collections')}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -67,17 +67,17 @@ export default function Footer() {
|
||||
</h3>
|
||||
<ul className="space-y-2 text-xs">
|
||||
<li>
|
||||
<Link href="/hakkinda" className="hover:text-turquoise transition-colors">
|
||||
<Link href="/about" className="hover:text-turquoise transition-colors">
|
||||
{nav('about')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/iletisim" className="hover:text-turquoise transition-colors">
|
||||
<Link href="/contact" className="hover:text-turquoise transition-colors">
|
||||
{nav('contact')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/isletme-ekle" className="hover:text-turquoise transition-colors">
|
||||
<Link href="/add-business" className="hover:text-turquoise transition-colors">
|
||||
{nav('addBusiness')}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
|
||||
import { useTransition, useRef } from 'react'
|
||||
|
||||
export default function LiveFilterForm({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const debounceTimer = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
function updateRoute(form: HTMLFormElement) {
|
||||
const formData = new FormData(form)
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
|
||||
const search = formData.get('search') as string
|
||||
const neighborhood = formData.get('neighborhood') as string
|
||||
const price = formData.get('price') as string
|
||||
const approved = formData.get('approved') as string
|
||||
|
||||
if (search) params.set('search', search)
|
||||
else params.delete('search')
|
||||
|
||||
if (neighborhood) params.set('neighborhood', neighborhood)
|
||||
else params.delete('neighborhood')
|
||||
|
||||
if (price) params.set('price', price)
|
||||
else params.delete('price')
|
||||
|
||||
if (approved) params.set('approved', 'true')
|
||||
else params.delete('approved')
|
||||
|
||||
startTransition(() => {
|
||||
router.push(`${pathname}?${params.toString()}`, { scroll: false })
|
||||
})
|
||||
}
|
||||
|
||||
function onChange(e: React.FormEvent<HTMLFormElement>) {
|
||||
const form = e.currentTarget
|
||||
if (debounceTimer.current) clearTimeout(debounceTimer.current)
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
updateRoute(form)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onChange={onChange} onSubmit={(e) => { e.preventDefault(); updateRoute(e.currentTarget); }} className="grid grid-cols-1 sm:grid-cols-4 gap-4 items-end relative">
|
||||
{children}
|
||||
{isPending && (
|
||||
<div className="absolute inset-0 bg-stone/20 backdrop-blur-[1px] flex items-center justify-center z-10 rounded-xl transition-all" />
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
+29
-26
@@ -4,8 +4,9 @@ import { useState, useEffect } from 'react'
|
||||
import { Link, usePathname, useRouter } from '@/i18n/routing'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { Menu, X, Globe, PlusCircle, Heart } from 'lucide-react'
|
||||
import { Category } from '@prisma/client'
|
||||
|
||||
export default function Navbar() {
|
||||
export default function Navbar({ categories = [] }: { categories?: Category[] }) {
|
||||
const t = useTranslations('nav')
|
||||
const activeLocale = useLocale()
|
||||
const pathname = usePathname()
|
||||
@@ -30,10 +31,10 @@ export default function Navbar() {
|
||||
}
|
||||
|
||||
updateCount()
|
||||
|
||||
|
||||
window.addEventListener('favorites-updated', updateCount)
|
||||
window.addEventListener('storage', updateCount)
|
||||
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('favorites-updated', updateCount)
|
||||
window.removeEventListener('storage', updateCount)
|
||||
@@ -46,15 +47,20 @@ export default function Navbar() {
|
||||
{ code: 'ru', label: 'Русский' }
|
||||
]
|
||||
|
||||
const getLocalizedName = (obj: any) => {
|
||||
if (!obj) return ''
|
||||
return activeLocale === 'ru' ? obj.nameRu : activeLocale === 'en' ? obj.nameEn : obj.nameTr
|
||||
}
|
||||
|
||||
const categoryItems = categories.map(cat => ({
|
||||
name: getLocalizedName(cat),
|
||||
href: `/${cat.slug}`
|
||||
}))
|
||||
|
||||
const navItems = [
|
||||
{ name: t('home'), href: '/' },
|
||||
{ name: t('restaurants'), href: '/restoranlar' },
|
||||
{ name: t('aparts'), href: '/apartlar' },
|
||||
{ name: t('businesses'), href: '/isletmeler' },
|
||||
{ name: t('collections'), href: '/seckiler' },
|
||||
...categoryItems,
|
||||
{ name: t('events'), href: '/events' },
|
||||
{ name: t('blog'), href: '/blog' },
|
||||
{ name: t('about'), href: '/hakkinda' },
|
||||
{ name: t('contact'), href: '/iletisim' }
|
||||
]
|
||||
|
||||
const handleLanguageChange = (localeCode: string) => {
|
||||
@@ -66,7 +72,7 @@ export default function Navbar() {
|
||||
<header className="bg-pine text-stone border-b border-white/10 sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
|
||||
|
||||
{/* Logo & Wordmark */}
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-11 h-11 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0 shadow-sm transition-transform group-hover:scale-105">
|
||||
@@ -84,16 +90,15 @@ export default function Navbar() {
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-6">
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`text-sm font-medium transition-colors hover:text-turquoise ${
|
||||
isActive ? 'text-turquoise font-semibold' : 'text-stone/80'
|
||||
}`}
|
||||
className={`text-sm font-medium transition-colors hover:text-turquoise ${isActive ? 'text-turquoise font-semibold' : 'text-stone/80'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -105,7 +110,7 @@ export default function Navbar() {
|
||||
<div className="hidden lg:flex items-center gap-4">
|
||||
{/* Saved items trigger */}
|
||||
<Link
|
||||
href="/kaydedilenler"
|
||||
href="/saved"
|
||||
className="relative w-8 h-8 rounded-full border border-stone/20 hover:border-turquoise transition text-stone hover:text-turquoise flex items-center justify-center"
|
||||
title={t('saved')}
|
||||
>
|
||||
@@ -126,7 +131,7 @@ export default function Navbar() {
|
||||
<Globe className="w-3.5 h-3.5 text-turquoise" />
|
||||
{activeLocale.toUpperCase()}
|
||||
</button>
|
||||
|
||||
|
||||
{langMenuOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
|
||||
@@ -135,9 +140,8 @@ export default function Navbar() {
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => handleLanguageChange(lang.code)}
|
||||
className={`w-full text-left px-4 py-2 text-xs hover:bg-stone transition flex items-center justify-between ${
|
||||
activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
|
||||
}`}
|
||||
className={`w-full text-left px-4 py-2 text-xs hover:bg-stone transition flex items-center justify-between ${activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
|
||||
}`}
|
||||
>
|
||||
{lang.label}
|
||||
<span className="font-mono text-[10px] text-shutter">{lang.code.toUpperCase()}</span>
|
||||
@@ -150,7 +154,7 @@ export default function Navbar() {
|
||||
|
||||
{/* Add Business Button */}
|
||||
<Link
|
||||
href="/isletme-ekle"
|
||||
href="/add-business"
|
||||
className="flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper font-medium text-xs py-2 px-4 rounded-full transition-transform active:scale-95 shadow-sm"
|
||||
>
|
||||
<PlusCircle className="w-3.5 h-3.5" />
|
||||
@@ -162,7 +166,7 @@ export default function Navbar() {
|
||||
<div className="flex items-center gap-3 lg:hidden">
|
||||
{/* Mobile Saved trigger */}
|
||||
<Link
|
||||
href="/kaydedilenler"
|
||||
href="/saved"
|
||||
className="relative w-8 h-8 rounded-full border border-stone/20 text-stone flex items-center justify-center"
|
||||
title={t('saved')}
|
||||
>
|
||||
@@ -223,9 +227,8 @@ export default function Navbar() {
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`text-sm font-medium py-2 px-3 rounded-lg transition-colors ${
|
||||
isActive ? 'bg-white/10 text-turquoise' : 'text-stone/80 hover:bg-white/5'
|
||||
}`}
|
||||
className={`text-sm font-medium py-2 px-3 rounded-lg transition-colors ${isActive ? 'bg-white/10 text-turquoise' : 'text-stone/80 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -234,7 +237,7 @@ export default function Navbar() {
|
||||
</nav>
|
||||
<div className="pt-4 border-t border-white/10">
|
||||
<Link
|
||||
href="/isletme-ekle"
|
||||
href="/add-business"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="w-full flex items-center justify-center gap-2 bg-turquoise hover:bg-turquoise/90 text-paper font-medium py-3 rounded-lg text-sm transition"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user