feat: add dynamic site settings, hero media, admin panels, and database integration
This commit is contained in:
mstfyldz
@@ -0,0 +1,134 @@
|
||||
import { prisma } from '@/lib/db';
|
||||
import { getSession } from '@/lib/auth';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { Save, Upload } from 'lucide-react';
|
||||
import { updateSiteSettings } from '../actions';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { uploadImage } from '@/lib/cloudinary';
|
||||
|
||||
export default async function SettingsAdminPage() {
|
||||
const session = await getSession();
|
||||
if (!session) redirect('/admin/login');
|
||||
|
||||
const settings = await prisma.siteSettings.findFirst();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold">Site Ayarları</h1>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 p-6">
|
||||
<form action={async (formData: FormData) => {
|
||||
'use server';
|
||||
|
||||
const data: any = {
|
||||
phone: formData.get('phone') as string,
|
||||
email: formData.get('email') as string,
|
||||
addressText1: formData.get('addressText1') as string,
|
||||
addressText2: formData.get('addressText2') as string,
|
||||
workingHours: formData.get('workingHours') as string,
|
||||
instagramUrl: formData.get('instagramUrl') as string,
|
||||
facebookUrl: formData.get('facebookUrl') as string,
|
||||
youtubeUrl: formData.get('youtubeUrl') as string,
|
||||
whatsappNumber: formData.get('whatsappNumber') as string,
|
||||
};
|
||||
|
||||
const logoFile = formData.get('logo') as File;
|
||||
if (logoFile && logoFile.size > 0) {
|
||||
data.logoUrl = await uploadImage(logoFile);
|
||||
}
|
||||
|
||||
await updateSiteSettings(data);
|
||||
revalidatePath('/', 'layout');
|
||||
redirect('/admin/settings');
|
||||
}} className="space-y-8">
|
||||
|
||||
{/* Logo Section */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold mb-4 border-b pb-2">Logo Ayarları</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||
Yeni Logo Yükle
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
name="logo"
|
||||
accept="image/*"
|
||||
className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
||||
/>
|
||||
</div>
|
||||
{settings?.logoUrl && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Mevcut Logo</label>
|
||||
<div className="p-4 bg-slate-800 rounded-lg w-fit">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={settings.logoUrl} alt="Logo" className="h-12 w-auto object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold mb-4 border-b pb-2">İletişim Bilgileri</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Telefon</label>
|
||||
<input type="text" name="phone" defaultValue={settings?.phone || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="+90 534 465 62 35" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">E-posta</label>
|
||||
<input type="email" name="email" defaultValue={settings?.email || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="info@moybeachakyaka.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Çalışma Saatleri</label>
|
||||
<input type="text" name="workingHours" defaultValue={settings?.workingHours || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="Her Gün: 09:00 - 02:00" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">WhatsApp Numarası</label>
|
||||
<input type="text" name="whatsappNumber" defaultValue={settings?.whatsappNumber || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="905344656235 (Sadece rakam, + olmadan)" />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Adres Satırı 1</label>
|
||||
<input type="text" name="addressText1" defaultValue={settings?.addressText1 || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="Akyaka Mah. Gümüş Sok." />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Adres Satırı 2</label>
|
||||
<input type="text" name="addressText2" defaultValue={settings?.addressText2 || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="Ula, Muğla / Türkiye" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Social Media */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold mb-4 border-b pb-2">Sosyal Medya Linkleri</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Instagram URL</label>
|
||||
<input type="url" name="instagramUrl" defaultValue={settings?.instagramUrl || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="https://instagram.com/moybeachakyaka" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Facebook URL</label>
|
||||
<input type="url" name="facebookUrl" defaultValue={settings?.facebookUrl || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="https://facebook.com/moybeachakyaka" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">YouTube URL</label>
|
||||
<input type="url" name="youtubeUrl" defaultValue={settings?.youtubeUrl || ""} className="w-full px-4 py-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" placeholder="https://youtube.com/@moybeach" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="pt-4 flex justify-end">
|
||||
<button type="submit" className="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors font-medium">
|
||||
<Save className="w-5 h-5" />
|
||||
<span>Ayarları Kaydet</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user