67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import { createCategory, updateCategory } from '../actions';
|
||
|
||
interface CategoryFormProps {
|
||
initialData?: any;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function CategoryForm({ initialData, onClose }: CategoryFormProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
async function handleSubmit(formData: FormData) {
|
||
setLoading(true);
|
||
if (initialData) {
|
||
await updateCategory(initialData.id, formData);
|
||
} else {
|
||
await createCategory(formData);
|
||
}
|
||
setLoading(false);
|
||
onClose();
|
||
}
|
||
|
||
return (
|
||
<div className="modal-overlay">
|
||
<div className="modal-content">
|
||
<div className="card-header">
|
||
<h2 className="card-title">{initialData ? 'Kategoriyi Düzenle' : 'Yeni Kategori Ekle'}</h2>
|
||
<button onClick={onClose} className="action-btn">✕</button>
|
||
</div>
|
||
<form action={handleSubmit} className="admin-form">
|
||
<div className="form-group">
|
||
<label htmlFor="title">Kategori Başlığı</label>
|
||
<input
|
||
id="title"
|
||
name="title"
|
||
defaultValue={initialData?.title}
|
||
className="admin-input"
|
||
placeholder="Örn: Klasik Kokteyller"
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="externalId">Harici ID (İkon eşleşmesi için)</label>
|
||
<input
|
||
id="externalId"
|
||
name="externalId"
|
||
defaultValue={initialData?.externalId}
|
||
className="admin-input"
|
||
placeholder="Örn: classic_cocktails"
|
||
/>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
|
||
<button type="submit" className="admin-btn" disabled={loading}>
|
||
{loading ? 'Kaydediliyor...' : 'Kaydet'}
|
||
</button>
|
||
<button type="button" onClick={onClose} className="admin-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#fff' }}>
|
||
İptal
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|