feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Save } from "lucide-react";
|
||||
import { updateAboutSettings } from "@/app/actions/about";
|
||||
import ImageUpload from "@/components/admin/ImageUpload";
|
||||
|
||||
type AboutSettings = {
|
||||
title: string;
|
||||
description: string;
|
||||
card1Title: string;
|
||||
card1Desc: string;
|
||||
card2Title: string;
|
||||
card2Desc: string;
|
||||
card3Title: string;
|
||||
card3Desc: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
export default function AboutClient({ settings }: { settings: AboutSettings }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [image, setImage] = useState(settings.image);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const result = await updateAboutSettings(formData);
|
||||
|
||||
if (result.success) {
|
||||
setSuccessMessage("Hakkımızda ayarları başarıyla kaydedildi.");
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-4xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">Hakkımızda Yönetimi</h1>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Site üzerindeki Hakkımızda bölümünün metinlerini ve ana görselini buradan değiştirebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successMessage && (
|
||||
<div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
name="title"
|
||||
defaultValue={settings.title}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Açıklama (Ana Metin)</label>
|
||||
<textarea
|
||||
name="description"
|
||||
defaultValue={settings.description}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Kart 1 (Örn: Kusursuz Sahil)</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
name="card1Title"
|
||||
defaultValue={settings.card1Title}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||
<input
|
||||
name="card1Desc"
|
||||
defaultValue={settings.card1Desc}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Kart 2 (Örn: Gastronomi)</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
name="card2Title"
|
||||
defaultValue={settings.card2Title}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||
<input
|
||||
name="card2Desc"
|
||||
defaultValue={settings.card2Desc}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Kart 3 (Örn: Canlı Eğlence)</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
name="card3Title"
|
||||
defaultValue={settings.card3Title}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Açıklama</label>
|
||||
<input
|
||||
name="card3Desc"
|
||||
defaultValue={settings.card3Desc}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Sağ Bölüm Görseli</h3>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Görsel Yükle</label>
|
||||
<ImageUpload
|
||||
name="image"
|
||||
value={image}
|
||||
onChange={setImage}
|
||||
label="Yeni Görsel Yükle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end border-t border-gray-100">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
<Save size={18} />
|
||||
{loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Edit2, Trash2, X } from "lucide-react";
|
||||
import { createAdmin, updateAdmin, deleteAdmin } from "@/app/actions/admin";
|
||||
|
||||
type Admin = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
createdAt: Date;
|
||||
};
|
||||
|
||||
export default function AdminsClient({ initialAdmins }: { initialAdmins: Admin[] }) {
|
||||
const [admins, setAdmins] = useState<Admin[]>(initialAdmins);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingAdmin, setEditingAdmin] = useState<Admin | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const openModal = (admin?: Admin) => {
|
||||
setEditingAdmin(admin || null);
|
||||
setError(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingAdmin(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
let result;
|
||||
if (editingAdmin) {
|
||||
result = await updateAdmin(editingAdmin.id, formData);
|
||||
} else {
|
||||
result = await createAdmin(formData);
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
// Reload sayfa verileri için basit bir çözüm
|
||||
window.location.reload();
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Bu yöneticiyi silmek istediğinize emin misiniz?")) return;
|
||||
|
||||
setLoading(true);
|
||||
const result = await deleteAdmin(id);
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(result.error || "Silinirken hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">Yöneticiler</h1>
|
||||
<button
|
||||
onClick={() => openModal()}
|
||||
className="bg-turquoise text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-turquoise/90 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Ekle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-100 text-sm text-gray-500">
|
||||
<th className="p-4 font-medium">İsim</th>
|
||||
<th className="p-4 font-medium">E-posta</th>
|
||||
<th className="p-4 font-medium">Kayıt Tarihi</th>
|
||||
<th className="p-4 font-medium text-right">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{admins.map((admin) => (
|
||||
<tr key={admin.id} className="border-b border-gray-50 hover:bg-gray-50/50">
|
||||
<td className="p-4 text-gray-900 font-medium">{admin.name}</td>
|
||||
<td className="p-4 text-gray-600">{admin.email}</td>
|
||||
<td className="p-4 text-gray-500 text-sm">
|
||||
{new Date(admin.createdAt).toLocaleDateString("tr-TR")}
|
||||
</td>
|
||||
<td className="p-4 flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => openModal(admin)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(admin.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{admins.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="p-8 text-center text-gray-500">
|
||||
Henüz bir yönetici bulunmuyor.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 relative">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">
|
||||
{editingAdmin ? "Yönetici Düzenle" : "Yeni Yönetici Ekle"}
|
||||
</h2>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">İsim Soyisim</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
defaultValue={editingAdmin?.name}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">E-posta</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
defaultValue={editingAdmin?.email}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Şifre {editingAdmin && <span className="text-gray-400 font-normal">(Değiştirmek istemiyorsanız boş bırakın)</span>}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required={!editingAdmin}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-6 py-2 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Save } from "lucide-react";
|
||||
import { updateBeachSettings } from "@/app/actions/beach";
|
||||
import ImageUpload from "@/components/admin/ImageUpload";
|
||||
|
||||
type BeachSettings = {
|
||||
title: string;
|
||||
description: string;
|
||||
reservationInfo: string;
|
||||
image1: string;
|
||||
image2: string;
|
||||
image3: string;
|
||||
image4: string;
|
||||
};
|
||||
|
||||
export default function BeachClient({ settings }: { settings: BeachSettings }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const [image1, setImage1] = useState(settings.image1);
|
||||
const [image2, setImage2] = useState(settings.image2);
|
||||
const [image3, setImage3] = useState(settings.image3);
|
||||
const [image4, setImage4] = useState(settings.image4);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const result = await updateBeachSettings(formData);
|
||||
|
||||
if (result.success) {
|
||||
setSuccessMessage("Plaj ayarları başarıyla kaydedildi.");
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-4xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">Plaj Yönetimi</h1>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Site üzerindeki Plaj (Beach) bölümünün yazılarını ve görsellerini buradan değiştirebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successMessage && (
|
||||
<div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
name="title"
|
||||
defaultValue={settings.title}
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Açıklama (Ana Metin)</label>
|
||||
<textarea
|
||||
name="description"
|
||||
defaultValue={settings.description}
|
||||
required
|
||||
rows={4}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Rezervasyon Bilgisi (Buton Üstü Not)</label>
|
||||
<textarea
|
||||
name="reservationInfo"
|
||||
defaultValue={settings.reservationInfo}
|
||||
required
|
||||
rows={2}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Plaj Görselleri (4 Adet)</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Görsel 1 (Sol Üst, Dikey)</label>
|
||||
<ImageUpload
|
||||
name="image1"
|
||||
value={image1}
|
||||
onChange={setImage1}
|
||||
label="Görsel 1 Yükle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Görsel 2 (Sol Alt, Kare)</label>
|
||||
<ImageUpload
|
||||
name="image2"
|
||||
value={image2}
|
||||
onChange={setImage2}
|
||||
label="Görsel 2 Yükle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Görsel 3 (Sağ Üst, Kare)</label>
|
||||
<ImageUpload
|
||||
name="image3"
|
||||
value={image3}
|
||||
onChange={setImage3}
|
||||
label="Görsel 3 Yükle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">Görsel 4 (Sağ Alt, Dikey)</label>
|
||||
<ImageUpload
|
||||
name="image4"
|
||||
value={image4}
|
||||
onChange={setImage4}
|
||||
label="Görsel 4 Yükle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end border-t border-gray-100">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
<Save size={18} />
|
||||
{loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Save } from "lucide-react";
|
||||
import { updateContactSettings } from "@/app/actions/contact";
|
||||
|
||||
type ContactSettings = {
|
||||
address: string;
|
||||
phone: string;
|
||||
instagram: string;
|
||||
mapUrl: string;
|
||||
};
|
||||
|
||||
export default function ContactClient({ settings }: { settings: ContactSettings }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const result = await updateContactSettings(formData);
|
||||
|
||||
if (result.success) {
|
||||
setSuccessMessage("İletişim ayarları başarıyla kaydedildi.");
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-4xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">İletişim & Konum</h1>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Site üzerindeki iletişim bilgilerini ve Google Haritalar iframe adresini buradan güncelleyebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-4 rounded-lg text-sm font-medium">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successMessage && (
|
||||
<div className="bg-green-50 text-green-600 p-4 rounded-lg text-sm font-medium">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Adres</label>
|
||||
<textarea
|
||||
name="address"
|
||||
defaultValue={settings.address}
|
||||
placeholder="Örn: Akyaka Mah. Gökova..."
|
||||
required
|
||||
rows={3}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefon / WhatsApp (Ülke Koduyla)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
defaultValue={settings.phone}
|
||||
placeholder="Örn: 905001234567"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Instagram Linki</label>
|
||||
<input
|
||||
type="url"
|
||||
name="instagram"
|
||||
defaultValue={settings.instagram}
|
||||
placeholder="https://instagram.com/..."
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Google Maps Embed URL (src)</label>
|
||||
<textarea
|
||||
name="mapUrl"
|
||||
defaultValue={settings.mapUrl}
|
||||
placeholder="https://www.google.com/maps/embed?pb=..."
|
||||
required
|
||||
rows={4}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Google Haritalar'dan "Harita Yerleştir" seçeneğini seçip içindeki <strong>src="..."</strong> kısmındaki URL'yi buraya yapıştırın.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end border-t border-gray-100">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-8 py-2.5 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
<Save size={18} />
|
||||
{loading ? "Kaydediliyor..." : "Ayarları Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Edit2, Trash2, X, Star } from "lucide-react";
|
||||
import { createEvent, updateEvent, deleteEvent } from "@/app/actions/events";
|
||||
|
||||
type Event = {
|
||||
id: string;
|
||||
title: string;
|
||||
time: string;
|
||||
tag: string;
|
||||
iconType: string;
|
||||
colorTheme: string;
|
||||
isFeatured: boolean;
|
||||
};
|
||||
|
||||
export default function EventsClient({ initialEvents }: { initialEvents: Event[] }) {
|
||||
const [events] = useState<Event[]>(initialEvents);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState<Event | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const openModal = (event?: Event) => {
|
||||
setEditingEvent(event || null);
|
||||
setError(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingEvent(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
let result;
|
||||
if (editingEvent) {
|
||||
result = await updateEvent(editingEvent.id, formData);
|
||||
} else {
|
||||
result = await createEvent(formData);
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Bu etkinliği silmek istediğinize emin misiniz?")) return;
|
||||
|
||||
setLoading(true);
|
||||
const result = await deleteEvent(id);
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(result.error || "Silinirken hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">Etkinlikler</h1>
|
||||
<button
|
||||
onClick={() => openModal()}
|
||||
className="bg-turquoise text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-turquoise/90 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Ekle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-100 text-sm text-gray-500">
|
||||
<th className="p-4 font-medium w-12">Öne Çıkan</th>
|
||||
<th className="p-4 font-medium">Başlık</th>
|
||||
<th className="p-4 font-medium">Zaman</th>
|
||||
<th className="p-4 font-medium">Etiket</th>
|
||||
<th className="p-4 font-medium text-right">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{events.map((event) => (
|
||||
<tr key={event.id} className="border-b border-gray-50 hover:bg-gray-50/50">
|
||||
<td className="p-4 text-center">
|
||||
{event.isFeatured ? <Star className="w-5 h-5 text-yellow-400 fill-current" /> : ""}
|
||||
</td>
|
||||
<td className="p-4 text-gray-900 font-medium">{event.title}</td>
|
||||
<td className="p-4 text-gray-600">{event.time}</td>
|
||||
<td className="p-4 text-gray-500 text-sm">
|
||||
<span className="px-2 py-1 bg-gray-100 rounded text-xs font-bold">{event.tag}</span>
|
||||
</td>
|
||||
<td className="p-4 flex justify-end gap-2">
|
||||
<button
|
||||
onClick={() => openModal(event)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(event.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{events.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="p-8 text-center text-gray-500">
|
||||
Henüz bir etkinlik bulunmuyor.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6 relative max-h-[90vh] overflow-y-auto">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">
|
||||
{editingEvent ? "Etkinlik Düzenle" : "Yeni Etkinlik Ekle"}
|
||||
</h2>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Başlık</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
defaultValue={editingEvent?.title}
|
||||
placeholder="Örn: DJ Gecesi"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Zaman</label>
|
||||
<input
|
||||
type="text"
|
||||
name="time"
|
||||
defaultValue={editingEvent?.time}
|
||||
placeholder="Örn: Cuma & Cumartesi, 22:00"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Etiket (Gün/Kısa Bilgi)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tag"
|
||||
defaultValue={editingEvent?.tag}
|
||||
placeholder="Örn: CUM veya ÖZEL"
|
||||
required
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">İkon Tipi</label>
|
||||
<select
|
||||
name="iconType"
|
||||
defaultValue={editingEvent?.iconType || "music"}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise outline-none"
|
||||
>
|
||||
<option value="music">Müzik Notası</option>
|
||||
<option value="dj">DJ Diski (Plak)</option>
|
||||
<option value="glass">Kadeh (Rakı vb.)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Renk Teması</label>
|
||||
<select
|
||||
name="colorTheme"
|
||||
defaultValue={editingEvent?.colorTheme || "cyan"}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise outline-none"
|
||||
>
|
||||
<option value="cyan">Mavi (Cyan)</option>
|
||||
<option value="coral">Mercan (Coral)</option>
|
||||
<option value="amber">Turuncu (Amber)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isFeatured"
|
||||
id="isFeatured"
|
||||
defaultChecked={editingEvent?.isFeatured}
|
||||
className="w-5 h-5 text-turquoise focus:ring-turquoise border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="isFeatured" className="text-sm font-medium text-gray-700">
|
||||
Öne Çıkan Etkinlik (Ana sayfada en büyük kart olarak gösterilir)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 border-t border-gray-100 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-6 py-2 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Edit2, Trash2, X, Image as ImageIcon } from "lucide-react";
|
||||
import { createGalleryImage, updateGalleryImage, deleteGalleryImage } from "@/app/actions/gallery";
|
||||
import ImageUpload from "@/components/admin/ImageUpload";
|
||||
|
||||
type GalleryImage = {
|
||||
id: string;
|
||||
src: string;
|
||||
alt: string | null;
|
||||
order: number;
|
||||
};
|
||||
|
||||
export default function GalleryClient({ initialImages }: { initialImages: GalleryImage[] }) {
|
||||
const [images] = useState<GalleryImage[]>(initialImages);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingImage, setEditingImage] = useState<GalleryImage | null>(null);
|
||||
const [editingImageSrc, setEditingImageSrc] = useState<string>("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const openModal = (image?: GalleryImage) => {
|
||||
setEditingImage(image || null);
|
||||
setEditingImageSrc(image?.src || "");
|
||||
setError(null);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingImage(null);
|
||||
setEditingImageSrc("");
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
let result;
|
||||
if (editingImage) {
|
||||
result = await updateGalleryImage(editingImage.id, formData);
|
||||
} else {
|
||||
result = await createGalleryImage(formData);
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
setError(result.error || "Bir hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Bu görseli silmek istediğinize emin misiniz?")) return;
|
||||
|
||||
setLoading(true);
|
||||
const result = await deleteGalleryImage(id);
|
||||
if (result.success) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(result.error || "Silinirken hata oluştu");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-serif text-gray-900">Galeri Görselleri</h1>
|
||||
<button
|
||||
onClick={() => openModal()}
|
||||
className="bg-turquoise text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-turquoise/90 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Görsel Ekle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{images.map((image) => (
|
||||
<div key={image.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden group relative">
|
||||
<div className="aspect-video w-full bg-gray-100 relative overflow-hidden">
|
||||
{image.src ? (
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt || "Galeri görseli"}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400">
|
||||
<ImageIcon size={48} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="text-sm font-medium text-gray-900 truncate" title={image.alt || ""}>
|
||||
{image.alt || <span className="text-gray-400 italic">Başlıksız</span>}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Sıra: {image.order}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity bg-white/90 backdrop-blur-sm p-1.5 rounded-lg shadow-sm">
|
||||
<button
|
||||
onClick={() => openModal(image)}
|
||||
className="p-1.5 text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
title="Düzenle"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(image.id)}
|
||||
className="p-1.5 text-red-600 hover:bg-red-50 rounded transition-colors"
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{images.length === 0 && (
|
||||
<div className="col-span-full p-12 text-center text-gray-500 bg-white rounded-xl border border-dashed border-gray-200">
|
||||
<ImageIcon className="w-12 h-12 mx-auto text-gray-300 mb-3" />
|
||||
<p>Henüz galeriye görsel eklenmemiş.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6 relative">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">
|
||||
{editingImage ? "Görseli Düzenle" : "Yeni Görsel Ekle"}
|
||||
</h2>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Görsel Yükle</label>
|
||||
<ImageUpload
|
||||
name="src"
|
||||
value={editingImageSrc}
|
||||
onChange={setEditingImageSrc}
|
||||
label="Galeri Görseli Yükle"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Görsel bilgisayarınızdan veya kameradan seçilip yüklenebilir.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Açıklama / Alt Metin</label>
|
||||
<input
|
||||
type="text"
|
||||
name="alt"
|
||||
defaultValue={editingImage?.alt || ""}
|
||||
placeholder="Opsiyonel açıklama..."
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Sıralama (Opsiyonel)</label>
|
||||
<input
|
||||
type="number"
|
||||
name="order"
|
||||
defaultValue={editingImage?.order || 0}
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Küçük numaralar ilk sırada gösterilir.</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 border-t border-gray-100 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-turquoise text-white px-6 py-2 rounded-lg hover:bg-turquoise/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { CldUploadWidget } from "next-cloudinary";
|
||||
import { ImagePlus, X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
interface ImageUploadProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
folder?: string;
|
||||
label?: string;
|
||||
name?: string; // Add name prop for hidden input
|
||||
}
|
||||
|
||||
export default function ImageUpload({ value, onChange, folder = "kozmosbeach", label = "Görsel Yükle", name }: ImageUploadProps) {
|
||||
const onUpload = (result: any) => {
|
||||
onChange(result.info.secure_url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{name && <input type="hidden" name={name} value={value} />}
|
||||
{value ? (
|
||||
<div className="relative w-full aspect-video rounded-xl overflow-hidden border border-gray-200">
|
||||
<Image
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
className="object-cover"
|
||||
alt="Upload"
|
||||
src={value}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange("")}
|
||||
className="p-1.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition shadow-sm"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<CldUploadWidget
|
||||
signatureEndpoint="/api/cloudinary"
|
||||
options={{
|
||||
folder: folder,
|
||||
maxFiles: 1,
|
||||
sources: ["local", "url", "camera"],
|
||||
}}
|
||||
onSuccess={onUpload}
|
||||
>
|
||||
{({ open }) => {
|
||||
const onClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
open();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="w-full h-32 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center gap-2 text-gray-500 hover:border-turquoise hover:text-turquoise transition-colors bg-gray-50 hover:bg-turquoise/5"
|
||||
>
|
||||
<ImagePlus size={24} />
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</CldUploadWidget>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { login } from "@/app/actions/auth";
|
||||
|
||||
export default function LoginClient() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const result = await login(formData);
|
||||
|
||||
if (result.success) {
|
||||
window.location.href = "/admin"; // Başarılı giriş
|
||||
} else {
|
||||
setError(result.error || "Giriş başarısız.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
||||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
|
||||
|
||||
<div className="bg-charcoal p-8 text-center flex flex-col items-center">
|
||||
<img src="/logo.png" alt="Kozmos Logo" className="h-16 mb-2 brightness-0 invert opacity-90 object-contain" />
|
||||
<p className="text-cream/70 text-sm mt-1">Yönetim Paneline Giriş Yapın</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm font-medium text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">E-posta Adresi</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
|
||||
placeholder="admin@kozmosbeach.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Şifre</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-turquoise focus:border-transparent outline-none transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3.5 bg-turquoise text-white rounded-xl font-medium hover:bg-turquoise/90 focus:ring-4 focus:ring-turquoise/20 transition-all disabled:opacity-70 mt-2"
|
||||
>
|
||||
{loading ? "Giriş Yapılıyor..." : "Giriş Yap"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="p-4 bg-gray-50 border-t border-gray-100 text-center">
|
||||
<a href="/" className="text-sm text-gray-500 hover:text-turquoise transition-colors">
|
||||
← Siteye Geri Dön
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user