Refactor expense form fields

Hide title suggestions initially and show them after category selection.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 12:45:46 +00:00
parent 9adc4b2e5f
commit 45d890d39a
2 changed files with 21 additions and 30 deletions

View File

@@ -21,25 +21,17 @@ const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
}
return (
<div
className={`overflow-hidden transition-all duration-300 ease-out ${
showSuggestions
? 'max-h-24 opacity-100 translate-y-0'
: 'max-h-0 opacity-0 -translate-y-4'
}`}
>
<div className="flex flex-wrap gap-2 mt-1 mb-2">
{titleSuggestions.map((suggestion) => (
<Badge
key={suggestion}
variant="outline"
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
onClick={() => onSuggestionClick(suggestion)}
>
{suggestion}
</Badge>
))}
</div>
<div className="flex flex-wrap gap-2 mt-1 mb-2">
{titleSuggestions.map((suggestion) => (
<Badge
key={suggestion}
variant="outline"
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
onClick={() => onSuggestionClick(suggestion)}
>
{suggestion}
</Badge>
))}
</div>
);
};