diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2024-01-17 12:07:03 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2024-01-17 12:07:03 -0500 |
| commit | 92156b29cbcc496af705982bdf18dd558e765acb (patch) | |
| tree | c58086e5f2e5f5a40f6c32cbc203641d34ae935e /src/components/expense-form.tsx | |
| parent | c4de3f605c2c6ffa505ad098c72292e706359c0e (diff) | |
Use combobox for category selector
Diffstat (limited to 'src/components/expense-form.tsx')
| -rw-r--r-- | src/components/expense-form.tsx | 36 |
1 files changed, 5 insertions, 31 deletions
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index cfc749a..dfaaaa0 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -1,6 +1,6 @@ 'use client' -import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon' import { AsyncButton } from '@/components/async-button' +import { CategorySelector } from '@/components/category-selector' import { SubmitButton } from '@/components/submit-button' import { Button } from '@/components/ui/button' import { @@ -29,9 +29,7 @@ import { Input } from '@/components/ui/input' import { Select, SelectContent, - SelectGroup, SelectItem, - SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select' @@ -227,35 +225,11 @@ export function ExpenseForm({ render={({ field }) => ( <FormItem className="order-3 sm:order-2"> <FormLabel>Category</FormLabel> - <Select + <CategorySelector + categories={categories} + defaultValue={field.value} onValueChange={field.onChange} - defaultValue={field.value.toString()} - > - <SelectTrigger> - <SelectValue placeholder="Select a category" /> - </SelectTrigger> - <SelectContent> - {Object.keys(categoriesByGroup).map((group) => ( - <SelectGroup key={group}> - <SelectLabel className="-ml-6">{group}</SelectLabel> - {categoriesByGroup[group].map((category) => ( - <SelectItem - key={category.id.toString()} - value={category.id.toString()} - > - <div className="flex items-center gap-3"> - <CategoryIcon - category={category} - className="w-4 h-4" - /> - {category.name} - </div> - </SelectItem> - ))} - </SelectGroup> - ))} - </SelectContent> - </Select> + /> <FormDescription> Select the expense category. </FormDescription> |