feat: adicionar campo para criar categorias customizadas na adição/edição de projetos

This commit is contained in:
Erik
2025-12-03 14:25:51 -03:00
parent d4a94658bf
commit 16de9f48b8
2 changed files with 64 additions and 2 deletions

View File

@@ -30,6 +30,8 @@ export default function NewProject() {
const coverInputRef = useRef<HTMLInputElement | null>(null);
const galleryInputRef = useRef<HTMLInputElement | null>(null);
const [loading, setLoading] = useState(false);
const [categories, setCategories] = useState(CATEGORY_OPTIONS);
const [newCategory, setNewCategory] = useState('');
const [formData, setFormData] = useState({
title: '',
category: '',
@@ -217,10 +219,39 @@ export default function NewProject() {
required
>
<option value="">Selecione uma categoria</option>
{CATEGORY_OPTIONS.map((option) => (
{categories.map((option) => (
<option key={option.value} value={option.value}>{option.label}</option>
))}
</select>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Não encontra a categoria? Adicione uma nova abaixo</p>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Adicionar Nova Categoria</label>
<div className="flex gap-2">
<input
type="text"
value={newCategory}
onChange={(e) => setNewCategory(e.target.value)}
className="flex-1 px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
placeholder="Ex: Consultoria Ambiental"
/>
<button
type="button"
onClick={() => {
if (newCategory.trim()) {
const newCat = { value: newCategory, label: newCategory };
setCategories([...categories, newCat]);
setFormData({...formData, category: newCategory});
setNewCategory('');
success('Categoria adicionada!');
}
}}
className="px-4 py-3 bg-primary text-white rounded-xl font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
>
Adicionar
</button>
</div>
</div>
<div>