75 lines
2.7 KiB
TypeScript
75 lines
2.7 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-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>
|
||
|
||
{state?.success && (
|
||
<div className="bg-green-50 text-green-700 p-3 rounded-lg text-sm mb-4">
|
||
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">
|
||
{state.error}
|
||
</div>
|
||
)}
|
||
|
||
<form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Kullanıcı Adı *</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"
|
||
/>
|
||
</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>
|
||
<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"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">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"
|
||
>
|
||
<option value="admin">Admin</option>
|
||
<option value="editor">Editor</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="sm:col-span-3 flex justify-end">
|
||
<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"
|
||
>
|
||
<UserPlus size={16} />
|
||
{isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|