Refactor expense form fields
Hide title suggestions initially and show them after category selection.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user