feat: modernize admin panel UI and add openinary integration

This commit is contained in:
Mustafa Yildiz
2026-07-12 15:10:50 +03:00
parent 378a1e033a
commit ca1e849e80
20 changed files with 536 additions and 248 deletions
+23 -16
View File
@@ -8,63 +8,70 @@ export default function CreateUserForm() {
const [state, formAction, isPending] = useActionState(createUser, undefined)
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<div className="flex items-center gap-2 mb-4">
<UserPlus size={20} className="text-blue-600" />
<h2 className="text-lg font-semibold text-gray-800">Yeni Kullanıcı Ekle</h2>
<div className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 p-6 md:p-8">
<div className="flex items-center gap-3 mb-6">
<div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
<UserPlus size={20} />
</div>
<div>
<h2 className="text-lg font-bold text-slate-800 tracking-tight">Yeni Kullanıcı Ekle</h2>
<p className="text-xs text-slate-500">Sisteme yeni bir yönetici veya editör ekleyin.</p>
</div>
</div>
{state?.success && (
<div className="bg-green-50 text-green-700 p-3 rounded-lg text-sm mb-4">
<div className="bg-emerald-50 text-emerald-700 px-4 py-3 rounded-xl text-sm font-medium mb-6 border border-emerald-100/50">
Kullanıcı başarıyla oluşturuldu.
</div>
)}
{state?.error && (
<div className="bg-red-50 text-red-700 p-3 rounded-lg text-sm mb-4">
<div className="bg-red-50 text-red-700 px-4 py-3 rounded-xl text-sm font-medium mb-6 border border-red-100/50">
{state.error}
</div>
)}
<form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-5">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Kullanıcı Adı *</label>
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Kullanıcı Adı <span className="text-red-500">*</span></label>
<input
type="text"
name="username"
required
autoComplete="off"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all"
placeholder="örn: ahmet"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Şifre * <span className="text-gray-400 font-normal">(min. 6 karakter)</span></label>
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Şifre <span className="text-red-500">*</span> <span className="text-slate-400 font-normal">(min. 6 karakter)</span></label>
<input
type="password"
name="password"
required
autoComplete="new-password"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all"
placeholder="••••••"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Rol</label>
<label className="block text-sm font-semibold text-slate-700 mb-1.5">Rol</label>
<select
name="role"
defaultValue="admin"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all appearance-none"
>
<option value="admin">Admin</option>
<option value="editor">Editor</option>
</select>
</div>
<div className="sm:col-span-3 flex justify-end">
<div className="sm:col-span-3 flex justify-end mt-2">
<button
type="submit"
disabled={isPending}
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-5 rounded-lg text-sm transition-colors disabled:opacity-70 flex items-center gap-2"
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-6 rounded-xl text-sm transition-all shadow-sm hover:shadow-md hover:-translate-y-0.5 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-sm flex items-center gap-2"
>
<UserPlus size={16} />
<UserPlus size={18} />
{isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
</button>
</div>