diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2023-12-06 15:23:18 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2023-12-06 15:23:18 -0500 |
| commit | 72fe19987957e78cbd1d97ccfd8b87d85fea5c88 (patch) | |
| tree | da34dcde025697e8a4b13aad17d9291ee454d328 /src/components | |
| parent | 570aa713b1b2becf7c06c89610c75d2cb119b532 (diff) | |
Add currency
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/expense-form.tsx | 23 | ||||
| -rw-r--r-- | src/components/group-form.tsx | 26 |
2 files changed, 38 insertions, 11 deletions
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index 3202788..6420bc6 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -118,16 +118,19 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) { render={({ field }) => ( <FormItem className="order-2 sm:order-3"> <FormLabel>Amount</FormLabel> - <FormControl> - <Input - className="text-base" - type="number" - min={0.01} - step={0.01} - placeholder="0.00" - {...field} - /> - </FormControl> + <div className="flex items-baseline gap-2"> + <span>{group.currency}</span> + <FormControl> + <Input + className="text-base max-w-[120px]" + type="number" + min={0.01} + step={0.01} + placeholder="0.00" + {...field} + /> + </FormControl> + </div> <FormDescription>Enter the expense amount.</FormDescription> <FormMessage /> </FormItem> diff --git a/src/components/group-form.tsx b/src/components/group-form.tsx index 2e21aea..1057f27 100644 --- a/src/components/group-form.tsx +++ b/src/components/group-form.tsx @@ -36,10 +36,12 @@ export function GroupForm({ group, onSubmit }: Props) { defaultValues: group ? { name: group.name, + currency: group.currency, participants: group.participants, } : { name: '', + currency: '', participants: [{ name: 'John' }, { name: 'Jane' }, { name: 'Jack' }], }, }) @@ -60,7 +62,7 @@ export function GroupForm({ group, onSubmit }: Props) { <CardHeader> <CardTitle>Group information</CardTitle> </CardHeader> - <CardContent> + <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <FormField control={form.control} name="name" @@ -81,6 +83,28 @@ export function GroupForm({ group, onSubmit }: Props) { </FormItem> )} /> + + <FormField + control={form.control} + name="currency" + render={({ field }) => ( + <FormItem> + <FormLabel>Currency symbol</FormLabel> + <FormControl> + <Input + className="text-base" + placeholder="$, €, £…" + max={5} + {...field} + /> + </FormControl> + <FormDescription> + We’ll used it to display amounts. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> </CardContent> </Card> <Card> |