web sitesi yönetimi
This commit is contained in:
45
app/(dashboard)/dashboard/cms/content/actions.ts
Normal file
45
app/(dashboard)/dashboard/cms/content/actions.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
'use server'
|
||||
|
||||
import { createClient } from "@/lib/supabase-server"
|
||||
import { SiteContent } from "@/types/cms"
|
||||
import { revalidatePath } from "next/cache"
|
||||
|
||||
export async function updateSiteContent(contents: SiteContent[]) {
|
||||
const supabase = await createClient()
|
||||
|
||||
try {
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
|
||||
if (!user) {
|
||||
return { success: false, error: "Oturum açmanız gerekiyor" }
|
||||
}
|
||||
|
||||
// Upsert each content item
|
||||
// Since we might have many items, we can do this in parallel or a single upsert if the structure allows
|
||||
// Supabase upsert accepts an array
|
||||
const { error } = await supabase
|
||||
.from('site_contents')
|
||||
.upsert(
|
||||
contents.map(item => ({
|
||||
key: item.key,
|
||||
value: item.value,
|
||||
type: item.type,
|
||||
section: item.section,
|
||||
updated_at: new Date().toISOString()
|
||||
}))
|
||||
)
|
||||
|
||||
if (error) {
|
||||
console.error('CMS Update Error:', error)
|
||||
return { success: false, error: "Güncelleme sırasında bir hata oluştu: " + error.message }
|
||||
}
|
||||
|
||||
revalidatePath('/dashboard/cms/content')
|
||||
revalidatePath('/') // Revalidate home page as it likely uses these settings
|
||||
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
console.error('CMS Update Error:', error)
|
||||
return { success: false, error: "Bir hata oluştu" }
|
||||
}
|
||||
}
|
||||
61
app/(dashboard)/dashboard/cms/content/page.tsx
Normal file
61
app/(dashboard)/dashboard/cms/content/page.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { createClient } from "@/lib/supabase-server"
|
||||
import { ContentForm } from "@/components/dashboard/content-form"
|
||||
import { SiteContent } from "@/types/cms"
|
||||
|
||||
export default async function ContentPage() {
|
||||
const supabase = await createClient()
|
||||
|
||||
const { data: contents } = await supabase
|
||||
.from('site_contents')
|
||||
.select('*')
|
||||
.order('key')
|
||||
|
||||
// Define default contents that should exist
|
||||
const DEFAULT_CONTENTS: SiteContent[] = [
|
||||
// General
|
||||
{ key: 'site_title', value: 'ParaKasa', type: 'text', section: 'general' },
|
||||
{ key: 'site_description', value: '', type: 'long_text', section: 'general' },
|
||||
{ key: 'site_logo', value: '', type: 'image_url', section: 'general' },
|
||||
|
||||
// Contact
|
||||
{ key: 'contact_phone', value: '', type: 'text', section: 'contact' },
|
||||
{ key: 'contact_email', value: '', type: 'text', section: 'contact' },
|
||||
{ key: 'contact_address', value: '', type: 'long_text', section: 'contact' },
|
||||
{ key: 'social_instagram', value: '', type: 'text', section: 'contact' },
|
||||
{ key: 'social_youtube', value: '', type: 'text', section: 'contact' },
|
||||
{ key: 'social_tiktok', value: '', type: 'text', section: 'contact' },
|
||||
{ key: 'contact_map_embed', value: '', type: 'html', section: 'contact' },
|
||||
]
|
||||
|
||||
// Merge default contents with existing contents
|
||||
const mergedContents = [...(contents as SiteContent[] || [])]
|
||||
const existingKeys = new Set(mergedContents.map(c => c.key))
|
||||
|
||||
DEFAULT_CONTENTS.forEach(item => {
|
||||
if (!existingKeys.has(item.key)) {
|
||||
mergedContents.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight">İçerik Yönetimi</h2>
|
||||
</div>
|
||||
<div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
|
||||
<div className="grid gap-4 md:grid-cols-1 lg:grid-cols-1">
|
||||
<div className="col-span-1">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Site başlığı, sloganlar, iletişim bilgileri ve logoları buradan yönetebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
<ContentForm initialContent={mergedContents} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +1,11 @@
|
||||
"use client"
|
||||
import { getSiteContents } from "@/lib/data"
|
||||
import { ContactForm } from "@/components/contact/contact-form"
|
||||
import { Mail, MapPin, Phone, Instagram, Youtube } from "lucide-react"
|
||||
import { FaTiktok } from "react-icons/fa"
|
||||
import Link from "next/link"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Mail, MapPin, Phone, Loader2, CheckCircle } from "lucide-react"
|
||||
import { contactFormSchema, ContactFormValues } from "@/lib/schemas"
|
||||
import { submitContactForm } from "@/lib/actions/contact"
|
||||
import { toast } from "sonner"
|
||||
|
||||
export default function ContactPage() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSuccess, setIsSuccess] = useState(false)
|
||||
|
||||
const form = useForm<ContactFormValues>({
|
||||
resolver: zodResolver(contactFormSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
surname: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
},
|
||||
})
|
||||
|
||||
async function onSubmit(data: ContactFormValues) {
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const response = await submitContactForm(data)
|
||||
if (response.success) {
|
||||
setIsSuccess(true)
|
||||
form.reset()
|
||||
toast.success("Mesajınız başarıyla gönderildi.")
|
||||
} else {
|
||||
toast.error("Hata: " + response.error)
|
||||
}
|
||||
} catch {
|
||||
toast.error("Bir hata oluştu.")
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
export default async function ContactPage() {
|
||||
const siteSettings = await getSiteContents()
|
||||
|
||||
return (
|
||||
<div className="container py-12 md:py-24">
|
||||
@@ -63,9 +24,8 @@ export default function ContactPage() {
|
||||
<MapPin className="w-6 h-6 text-primary mt-1" />
|
||||
<div>
|
||||
<p className="font-medium">Merkez Ofis & Showroom</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Organize Sanayi Bölgesi, 12. Cadde No: 45<br />
|
||||
Başakşehir, İstanbul
|
||||
<p className="text-slate-600 dark:text-slate-400 whitespace-pre-wrap">
|
||||
{siteSettings.contact_address || "Organize Sanayi Bölgesi, 12. Cadde No: 45\nBaşakşehir, İstanbul"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,110 +33,55 @@ export default function ContactPage() {
|
||||
<Phone className="w-6 h-6 text-primary" />
|
||||
<div>
|
||||
<p className="font-medium">Telefon</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">+90 (212) 555 00 00</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{siteSettings.contact_phone || "+90 (212) 555 00 00"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Mail className="w-6 h-6 text-primary" />
|
||||
<div>
|
||||
<p className="font-medium">E-posta</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">info@parakasa.com</p>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{siteSettings.contact_email || "info@parakasa.com"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t">
|
||||
<h3 className="text-lg font-semibold mb-3">Sosyal Medya</h3>
|
||||
<div className="flex gap-4">
|
||||
{siteSettings.social_instagram && (
|
||||
<Link href={siteSettings.social_instagram} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||||
<Instagram className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{siteSettings.social_youtube && (
|
||||
<Link href={siteSettings.social_youtube} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||||
<Youtube className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{siteSettings.social_tiktok && (
|
||||
<Link href={siteSettings.social_tiktok} target="_blank" className="p-2 bg-slate-100 dark:bg-slate-800 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300">
|
||||
<FaTiktok className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative">
|
||||
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
|
||||
Harita (Google Maps Embed)
|
||||
{siteSettings.contact_map_embed ? (
|
||||
<div
|
||||
className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative"
|
||||
dangerouslySetInnerHTML={{ __html: siteSettings.contact_map_embed }}
|
||||
/>
|
||||
) : (
|
||||
<div className="aspect-video bg-slate-100 rounded-lg overflow-hidden relative flex items-center justify-center text-muted-foreground">
|
||||
Harita henüz eklenmemiş.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
{isSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center h-full min-h-[400px] text-center space-y-4">
|
||||
<CheckCircle className="w-16 h-16 text-green-500" />
|
||||
<h3 className="text-2xl font-bold">Mesajınız Alındı!</h3>
|
||||
<p className="text-muted-foreground">
|
||||
En kısa sürede size dönüş yapacağız.
|
||||
</p>
|
||||
<Button onClick={() => setIsSuccess(false)} variant="outline">
|
||||
Yeni Mesaj Gönder
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">Adınız</label>
|
||||
<Input id="name" {...form.register("name")} placeholder="Adınız" />
|
||||
{form.formState.errors.name && <p className="text-xs text-red-500">{form.formState.errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2 w-[210px]">
|
||||
<label htmlFor="surname" className="text-sm font-medium">Soyadınız</label>
|
||||
<Input id="surname" {...form.register("surname")} placeholder="Soyadınız" />
|
||||
{form.formState.errors.surname && <p className="text-xs text-red-500">{form.formState.errors.surname.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">E-posta</label>
|
||||
<Input id="email" type="email" {...form.register("email")} placeholder="ornek@sirket.com" />
|
||||
{form.formState.errors.email && <p className="text-xs text-red-500">{form.formState.errors.email.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-sm font-medium">Telefon</label>
|
||||
<div className="relative w-[210px]">
|
||||
<div className="absolute left-3 top-2 text-muted-foreground text-sm flex items-center gap-2 font-medium z-10 select-none pointer-events-none">
|
||||
<span>🇹🇷</span>
|
||||
<span>+90</span>
|
||||
<div className="w-px h-4 bg-border" />
|
||||
</div>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
className="pl-20 font-mono"
|
||||
placeholder="(5XX) XXX XX XX"
|
||||
maxLength={15}
|
||||
{...form.register("phone", {
|
||||
onChange: (e) => {
|
||||
let value = e.target.value.replace(/\D/g, ''); // Remove non-digits
|
||||
if (value.startsWith('90')) value = value.slice(2); // Remove leading 90 if user types it
|
||||
|
||||
// Format: (5XX) XXX XX XX
|
||||
let formattedValue = '';
|
||||
if (value.length > 0) formattedValue += '(' + value.substring(0, 3);
|
||||
if (value.length > 3) formattedValue += ') ' + value.substring(3, 6);
|
||||
if (value.length > 6) formattedValue += ' ' + value.substring(6, 8);
|
||||
if (value.length > 8) formattedValue += ' ' + value.substring(8, 10);
|
||||
|
||||
e.target.value = formattedValue;
|
||||
return e;
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{form.formState.errors.phone && <p className="text-xs text-red-500">{form.formState.errors.phone.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="subject" className="text-sm font-medium">Konu</label>
|
||||
<Input id="subject" {...form.register("subject")} placeholder="Konu" />
|
||||
{form.formState.errors.subject && <p className="text-xs text-red-500">{form.formState.errors.subject.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-medium">Mesajınız</label>
|
||||
<Textarea id="message" {...form.register("message")} placeholder="Size nasıl yardımcı olabiliriz?" className="min-h-[120px]" />
|
||||
{form.formState.errors.message && <p className="text-xs text-red-500">{form.formState.errors.message.message}</p>}
|
||||
</div>
|
||||
<Button size="lg" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Mesaj Gönder
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
137
components/contact/contact-form.tsx
Normal file
137
components/contact/contact-form.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Loader2, CheckCircle } from "lucide-react"
|
||||
import { contactFormSchema, ContactFormValues } from "@/lib/schemas"
|
||||
import { submitContactForm } from "@/lib/actions/contact"
|
||||
import { toast } from "sonner"
|
||||
|
||||
export function ContactForm() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSuccess, setIsSuccess] = useState(false)
|
||||
|
||||
const form = useForm<ContactFormValues>({
|
||||
resolver: zodResolver(contactFormSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
surname: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
},
|
||||
})
|
||||
|
||||
async function onSubmit(data: ContactFormValues) {
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const response = await submitContactForm(data)
|
||||
if (response.success) {
|
||||
setIsSuccess(true)
|
||||
form.reset()
|
||||
toast.success("Mesajınız başarıyla gönderildi.")
|
||||
} else {
|
||||
toast.error("Hata: " + response.error)
|
||||
}
|
||||
} catch {
|
||||
toast.error("Bir hata oluştu.")
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
{isSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center h-full min-h-[400px] text-center space-y-4">
|
||||
<CheckCircle className="w-16 h-16 text-green-500" />
|
||||
<h3 className="text-2xl font-bold">Mesajınız Alındı!</h3>
|
||||
<p className="text-muted-foreground">
|
||||
En kısa sürede size dönüş yapacağız.
|
||||
</p>
|
||||
<Button onClick={() => setIsSuccess(false)} variant="outline">
|
||||
Yeni Mesaj Gönder
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">Adınız</label>
|
||||
<Input id="name" {...form.register("name")} placeholder="Adınız" />
|
||||
{form.formState.errors.name && <p className="text-xs text-red-500">{form.formState.errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2 w-[210px]">
|
||||
<label htmlFor="surname" className="text-sm font-medium">Soyadınız</label>
|
||||
<Input id="surname" {...form.register("surname")} placeholder="Soyadınız" />
|
||||
{form.formState.errors.surname && <p className="text-xs text-red-500">{form.formState.errors.surname.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium">E-posta</label>
|
||||
<Input id="email" type="email" {...form.register("email")} placeholder="ornek@sirket.com" />
|
||||
{form.formState.errors.email && <p className="text-xs text-red-500">{form.formState.errors.email.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-sm font-medium">Telefon</label>
|
||||
<div className="relative w-[210px]">
|
||||
<div className="absolute left-3 top-2 text-muted-foreground text-sm flex items-center gap-2 font-medium z-10 select-none pointer-events-none">
|
||||
<span>🇹🇷</span>
|
||||
<span>+90</span>
|
||||
<div className="w-px h-4 bg-border" />
|
||||
</div>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
className="pl-20 font-mono"
|
||||
placeholder="(5XX) XXX XX XX"
|
||||
maxLength={15}
|
||||
{...form.register("phone", {
|
||||
onChange: (e) => {
|
||||
let value = e.target.value.replace(/\D/g, ''); // Remove non-digits
|
||||
if (value.startsWith('90')) value = value.slice(2); // Remove leading 90 if user types it
|
||||
|
||||
// Format: (5XX) XXX XX XX
|
||||
let formattedValue = '';
|
||||
if (value.length > 0) formattedValue += '(' + value.substring(0, 3);
|
||||
if (value.length > 3) formattedValue += ') ' + value.substring(3, 6);
|
||||
if (value.length > 6) formattedValue += ' ' + value.substring(6, 8);
|
||||
if (value.length > 8) formattedValue += ' ' + value.substring(8, 10);
|
||||
|
||||
e.target.value = formattedValue;
|
||||
return e;
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{form.formState.errors.phone && <p className="text-xs text-red-500">{form.formState.errors.phone.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="subject" className="text-sm font-medium">Konu</label>
|
||||
<Input id="subject" {...form.register("subject")} placeholder="Konu" />
|
||||
{form.formState.errors.subject && <p className="text-xs text-red-500">{form.formState.errors.subject.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-medium">Mesajınız</label>
|
||||
<Textarea id="message" {...form.register("message")} placeholder="Size nasıl yardımcı olabiliriz?" className="min-h-[120px]" />
|
||||
{form.formState.errors.message && <p className="text-xs text-red-500">{form.formState.errors.message.message}</p>}
|
||||
</div>
|
||||
<Button size="lg" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Mesaj Gönder
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
128
components/dashboard/content-form.tsx
Normal file
128
components/dashboard/content-form.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react"
|
||||
import { SiteContent } from "@/types/cms"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { ImageUpload } from "@/components/ui/image-upload" // Ensure this exists or adapt
|
||||
import { updateSiteContent } from "@/app/(dashboard)/dashboard/cms/content/actions"
|
||||
import { toast } from "sonner"
|
||||
import { Save, Loader2 } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface ContentFormProps {
|
||||
initialContent: SiteContent[]
|
||||
}
|
||||
|
||||
const SECTIONS = [
|
||||
{ id: 'general', label: 'Genel Ayarlar' },
|
||||
{ id: 'home', label: 'Anasayfa' },
|
||||
{ id: 'contact', label: 'İletişim' },
|
||||
]
|
||||
|
||||
export function ContentForm({ initialContent }: ContentFormProps) {
|
||||
const [contents, setContents] = useState<SiteContent[]>(initialContent)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeSection, setActiveSection] = useState('general')
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
setContents(prev => prev.map(item =>
|
||||
item.key === key ? { ...item, value } : item
|
||||
))
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await updateSiteContent(contents)
|
||||
if (result.success) {
|
||||
toast.success("İçerikler başarıyla güncellendi")
|
||||
} else {
|
||||
toast.error(result.error)
|
||||
}
|
||||
} catch {
|
||||
toast.error("Bir hata oluştu")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const filteredContent = contents.filter(item => item.section === activeSection)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Custom Tabs */}
|
||||
<div className="flex space-x-1 rounded-lg bg-muted p-1 overflow-x-auto">
|
||||
{SECTIONS.map((section) => (
|
||||
<button
|
||||
key={section.id}
|
||||
onClick={() => setActiveSection(section.id)}
|
||||
className={cn(
|
||||
"flex-1 justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
activeSection === section.id
|
||||
? "bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:bg-background/50 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{section.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{SECTIONS.find(s => s.id === activeSection)?.label}</CardTitle>
|
||||
<CardDescription>
|
||||
Bu bölümdeki içerikleri aşağıdan düzenleyebilirsiniz.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{filteredContent.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Bu bölümde henüz ayar bulunmuyor.</p>
|
||||
)}
|
||||
{filteredContent.map((item) => (
|
||||
<div key={item.key} className="space-y-2">
|
||||
<Label className="capitalize">
|
||||
{item.key.replace(/_/g, ' ').replace(activeSection, '').trim() || item.key}
|
||||
</Label>
|
||||
|
||||
{item.type === 'image_url' ? (
|
||||
<ImageUpload
|
||||
value={item.value}
|
||||
onChange={(url) => handleChange(item.key, url)}
|
||||
onRemove={() => handleChange(item.key, '')}
|
||||
/>
|
||||
) : item.type === 'long_text' || item.type === 'html' || item.key.includes('address') ? (
|
||||
<Textarea
|
||||
value={item.value}
|
||||
onChange={(e) => handleChange(item.key, e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
value={item.value}
|
||||
onChange={(e) => handleChange(item.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
{item.key.includes('map_embed') && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Google Maps'den alınan <iframe> kodunu buraya yapıştırın.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end sticky bottom-6 z-10">
|
||||
<Button onClick={onSubmit} disabled={loading} size="lg" className="shadow-lg">
|
||||
{loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
|
||||
Değişiklikleri Kaydet
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { LayoutDashboard, Package, ShoppingCart, Users, Settings, Globe, Tags } from "lucide-react"
|
||||
import { LayoutDashboard, Package, ShoppingCart, Users, Settings, Globe, Tags, FileText } from "lucide-react"
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
@@ -31,6 +31,11 @@ const sidebarItems = [
|
||||
href: "/dashboard/users",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "İçerik Yönetimi",
|
||||
href: "/dashboard/cms/content",
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
title: "Ayarlar",
|
||||
href: "/dashboard/settings",
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import Link from "next/link"
|
||||
import { getSiteContents } from "@/lib/data"
|
||||
import { Instagram, Youtube, Facebook } from "lucide-react"
|
||||
import { FaTiktok } from "react-icons/fa"
|
||||
|
||||
export async function Footer() {
|
||||
const siteSettings = await getSiteContents()
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-12 md:py-24 lg:py-32">
|
||||
<div className="container grid gap-8 px-4 md:px-6 lg:grid-cols-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-xl font-bold tracking-tighter">PARAKASA</span>
|
||||
<span className="text-xl font-bold tracking-tighter">{siteSettings.site_title || "PARAKASA"}</span>
|
||||
</Link>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Yüksek güvenlikli çelik kasa ve para sayma sistemleri için güvenilir çözüm ortağınız.
|
||||
{siteSettings.site_description || "Yüksek güvenlikli çelik kasa ve para sayma sistemleri için güvenilir çözüm ortağınız."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -44,19 +49,36 @@ export function Footer() {
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-semibold">Bize Ulaşın</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
İstanbul, Türkiye
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">
|
||||
{siteSettings.contact_address || "İstanbul, Türkiye"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
+90 212 000 00 00
|
||||
{siteSettings.contact_phone || "+90 212 000 00 00"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{siteSettings.contact_email}
|
||||
</p>
|
||||
<div className="flex gap-4 mt-4">
|
||||
{/* Social Media Icons would go here */}
|
||||
{siteSettings.social_instagram && (
|
||||
<Link href={siteSettings.social_instagram} target="_blank" className="text-muted-foreground hover:text-foreground">
|
||||
<Instagram className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{siteSettings.social_youtube && (
|
||||
<Link href={siteSettings.social_youtube} target="_blank" className="text-muted-foreground hover:text-foreground">
|
||||
<Youtube className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
{siteSettings.social_tiktok && (
|
||||
<Link href={siteSettings.social_tiktok} target="_blank" className="text-muted-foreground hover:text-foreground">
|
||||
<FaTiktok className="h-5 w-5" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container px-4 md:px-6 mt-8 pt-8 border-t text-center text-sm text-muted-foreground">
|
||||
© 2026 ParaKasa. Tüm hakları saklıdır.
|
||||
© {new Date().getFullYear()} {siteSettings.site_title || "ParaKasa"}. Tüm hakları saklıdır.
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@@ -4,19 +4,33 @@ import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { createClient } from "@/lib/supabase-server"
|
||||
import { getSiteContents } from "@/lib/data"
|
||||
import Image from "next/image"
|
||||
|
||||
export async function Navbar() {
|
||||
const supabase = createClient()
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
const siteSettings = await getSiteContents()
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-16 items-center">
|
||||
<div className="mr-8 hidden md:flex">
|
||||
<Link href="/" className="mr-6 flex items-center space-x-2">
|
||||
<span className="text-xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-500 dark:from-slate-100 dark:to-slate-400">
|
||||
PARAKASA
|
||||
</span>
|
||||
{siteSettings.site_logo ? (
|
||||
<div className="relative h-10 w-32">
|
||||
<Image
|
||||
src={siteSettings.site_logo}
|
||||
alt={siteSettings.site_title || "ParaKasa"}
|
||||
fill
|
||||
className="object-contain object-left"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-500 dark:from-slate-100 dark:to-slate-400">
|
||||
{siteSettings.site_title || "PARAKASA"}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<nav className="flex items-center space-x-6 text-sm font-medium">
|
||||
<Link
|
||||
@@ -52,8 +66,19 @@ export async function Navbar() {
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="pr-0">
|
||||
<Link href="/" className="flex items-center">
|
||||
<span className="font-bold">PARAKASA</span>
|
||||
<Link href="/" className="flex items-center mb-6">
|
||||
{siteSettings.site_logo ? (
|
||||
<div className="relative h-10 w-32">
|
||||
<Image
|
||||
src={siteSettings.site_logo}
|
||||
alt={siteSettings.site_title || "ParaKasa"}
|
||||
fill
|
||||
className="object-contain object-left"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="font-bold text-xl">{siteSettings.site_title || "PARAKASA"}</span>
|
||||
)}
|
||||
</Link>
|
||||
<div className="flex flex-col gap-4 mt-8">
|
||||
<Link href="/products">Ürünler</Link>
|
||||
|
||||
18
lib/data.ts
18
lib/data.ts
@@ -11,3 +11,21 @@ export const getProfile = cache(async (userId: string) => {
|
||||
|
||||
return data
|
||||
})
|
||||
|
||||
export const getSiteContents = cache(async () => {
|
||||
const supabase = createClient()
|
||||
const { data } = await supabase
|
||||
.from('site_contents')
|
||||
.select('*')
|
||||
|
||||
// Convert to a simpler key-value map for easier usage in components
|
||||
const contentMap: Record<string, string> = {}
|
||||
|
||||
if (data) {
|
||||
data.forEach((item: any) => {
|
||||
contentMap[item.key] = item.value
|
||||
})
|
||||
}
|
||||
|
||||
return contentMap
|
||||
})
|
||||
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@@ -33,6 +33,7 @@
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-hook-form": "^7.70.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-phone-number-input": "^3.4.14",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
@@ -6126,6 +6127,15 @@
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-hook-form": "^7.70.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-phone-number-input": "^3.4.14",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
|
||||
9
supabase_migration_tiktok.sql
Normal file
9
supabase_migration_tiktok.sql
Normal file
@@ -0,0 +1,9 @@
|
||||
-- Rename social_twitter to social_tiktok if it exists
|
||||
UPDATE site_contents
|
||||
SET key = 'social_tiktok'
|
||||
WHERE key = 'social_twitter';
|
||||
|
||||
-- If social_twitter didn't exist, insert social_tiktok (handling the case where it might already exist to avoid unique constraint error)
|
||||
INSERT INTO site_contents (key, value, type, section)
|
||||
VALUES ('social_tiktok', '', 'text', 'contact')
|
||||
ON CONFLICT (key) DO NOTHING;
|
||||
9
supabase_migration_youtube.sql
Normal file
9
supabase_migration_youtube.sql
Normal file
@@ -0,0 +1,9 @@
|
||||
-- Rename social_facebook to social_youtube if it exists
|
||||
UPDATE site_contents
|
||||
SET key = 'social_youtube'
|
||||
WHERE key = 'social_facebook';
|
||||
|
||||
-- If social_facebook didn't exist, insert social_youtube (handling the case where it might already exist)
|
||||
INSERT INTO site_contents (key, value, type, section)
|
||||
VALUES ('social_youtube', '', 'text', 'contact')
|
||||
ON CONFLICT (key) DO NOTHING;
|
||||
39
supabase_schema_site_contents.sql
Normal file
39
supabase_schema_site_contents.sql
Normal file
@@ -0,0 +1,39 @@
|
||||
-- Create site_contents table for dynamic CMS
|
||||
CREATE TABLE IF NOT EXISTS site_contents (
|
||||
key TEXT PRIMARY KEY,
|
||||
value TEXT,
|
||||
type TEXT CHECK (type IN ('text', 'image_url', 'html', 'long_text', 'json')),
|
||||
section TEXT NOT NULL,
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
|
||||
);
|
||||
|
||||
-- Enable Row Level Security
|
||||
ALTER TABLE site_contents ENABLE ROW LEVEL SECURITY;
|
||||
|
||||
-- Create policies
|
||||
-- Allow public read access to all site contents (needed for the public website)
|
||||
CREATE POLICY "Public read access" ON site_contents
|
||||
FOR SELECT TO public USING (true);
|
||||
|
||||
-- Allow authenticated users (admins) to update content
|
||||
CREATE POLICY "Admin update access" ON site_contents
|
||||
FOR UPDATE TO authenticated USING (true);
|
||||
|
||||
-- Allow authenticated users to insert (for initial setup)
|
||||
CREATE POLICY "Admin insert access" ON site_contents
|
||||
FOR INSERT TO authenticated WITH CHECK (true);
|
||||
|
||||
-- Insert default contents if they don't exist
|
||||
INSERT INTO site_contents (key, value, type, section) VALUES
|
||||
('site_title', 'ParaKasa', 'text', 'general'),
|
||||
('site_description', 'ParaKasa Yönetim Paneli', 'long_text', 'general'),
|
||||
('site_logo', '', 'image_url', 'general'),
|
||||
('contact_phone', '', 'text', 'contact'),
|
||||
('contact_email', '', 'text', 'contact'),
|
||||
('contact_address', '', 'long_text', 'contact'),
|
||||
('social_instagram', '', 'text', 'contact'),
|
||||
('social_youtube', '', 'text', 'contact'),
|
||||
('social_tiktok', '', 'text', 'contact'),
|
||||
('contact_map_embed', '', 'html', 'contact')
|
||||
ON CONFLICT (key) DO NOTHING;
|
||||
6
types/cms.ts
Normal file
6
types/cms.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface SiteContent {
|
||||
key: string
|
||||
value: string
|
||||
type: 'text' | 'image_url' | 'html' | 'json' | 'long_text'
|
||||
section: string
|
||||
}
|
||||
Reference in New Issue
Block a user