96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Plus, X } from 'lucide-react';
|
|
import { Button, Input } from '../ui';
|
|
import type { CreateCategoryRequest } from '../../types';
|
|
|
|
interface AddCategorySectionProps {
|
|
showForm: boolean;
|
|
onToggle: () => void;
|
|
onCreate: (data: CreateCategoryRequest) => Promise<void>;
|
|
}
|
|
|
|
export function AddCategorySection({ showForm, onToggle, onCreate }: AddCategorySectionProps) {
|
|
const { t } = useTranslation();
|
|
const [name, setName] = useState('');
|
|
const [limitAmount, setLimitAmount] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name || !limitAmount) return;
|
|
|
|
try {
|
|
setIsSubmitting(true);
|
|
await onCreate({
|
|
name,
|
|
limit_amount: parseFloat(limitAmount),
|
|
});
|
|
setName('');
|
|
setLimitAmount('');
|
|
onToggle();
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="glass-effect rounded-2xl shadow-lg p-6">
|
|
{!showForm ? (
|
|
<button
|
|
onClick={onToggle}
|
|
className="w-full flex items-center justify-center gap-3 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl transition-all duration-300 group"
|
|
>
|
|
<Plus className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
|
<span>{t('category.add')}</span>
|
|
</button>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-xl font-bold text-gray-900">{t('category.add')}</h3>
|
|
<button
|
|
onClick={onToggle}
|
|
className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
placeholder={t('category.name')}
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
fullWidth
|
|
/>
|
|
<Input
|
|
type="number"
|
|
placeholder={t('category.limit')}
|
|
value={limitAmount}
|
|
onChange={(e) => setLimitAmount(e.target.value)}
|
|
fullWidth
|
|
/>
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="success"
|
|
fullWidth
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting || !name || !limitAmount}
|
|
>
|
|
{t('common.save')}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
fullWidth
|
|
onClick={onToggle}
|
|
disabled={isSubmitting}
|
|
>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|