82 lines
3.5 KiB
TypeScript
82 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import { useActionState } from 'react'
|
||
import { createUser } from './actions'
|
||
import { UserPlus } from 'lucide-react'
|
||
|
||
export default function CreateUserForm() {
|
||
const [state, formAction, isPending] = useActionState(createUser, undefined)
|
||
|
||
return (
|
||
<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-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 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-5">
|
||
<div>
|
||
<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-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-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-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-semibold text-slate-700 mb-1.5">Rol</label>
|
||
<select
|
||
name="role"
|
||
defaultValue="admin"
|
||
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 mt-2">
|
||
<button
|
||
type="submit"
|
||
disabled={isPending}
|
||
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={18} />
|
||
{isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|