spacing consistency

This commit is contained in:
Josh Hawkins 2025-04-03 10:36:29 -05:00
parent bf5d241177
commit 81f5e789fc
2 changed files with 21 additions and 18 deletions

View File

@ -1,4 +1,10 @@
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import React, { useCallback } from "react"; import React, { useCallback } from "react";
@ -14,50 +20,47 @@ type TextEntryProps = {
children?: React.ReactNode; children?: React.ReactNode;
}; };
export default function TextEntry({ export default function TextEntry({
defaultValue, defaultValue = "",
placeholder, placeholder,
allowEmpty, allowEmpty = false,
onSave, onSave,
children, children,
}: TextEntryProps) { }: TextEntryProps) {
const formSchema = z.object({ const formSchema = z.object({
text: z.string(), text: allowEmpty
? z.string().optional()
: z.string().min(1, "Field is required"),
}); });
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { text: defaultValue }, defaultValues: { text: defaultValue },
}); });
const fileRef = form.register("text");
// upload handler
const onSubmit = useCallback( const onSubmit = useCallback(
(data: z.infer<typeof formSchema>) => { (data: z.infer<typeof formSchema>) => {
if (!allowEmpty && !data["text"]) { onSave(data.text || "");
return;
}
onSave(data["text"]);
}, },
[onSave, allowEmpty], [onSave],
); );
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField <FormField
control={form.control} control={form.control}
name="text" name="text"
render={() => ( render={({ field }) => (
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className="aspect-video h-8 w-full" {...field}
className="w-full"
placeholder={placeholder} placeholder={placeholder}
type="text" type="text"
{...fileRef}
/> />
</FormControl> </FormControl>
<FormMessage className="text-xs text-destructive" />
</FormItem> </FormItem>
)} )}
/> />

View File

@ -101,7 +101,7 @@ export default function CreateFaceWizardDialog({
}} }}
> >
<Content <Content
className={cn("flex flex-col gap-4", isDesktop ? "max-w-[50%]" : "p-4")} className={cn("flex flex-col gap-4", isDesktop ? "max-w-3xl" : "p-4")}
> >
<Header> <Header>
<Title>{t("button.addFace")}</Title> <Title>{t("button.addFace")}</Title>
@ -110,7 +110,7 @@ export default function CreateFaceWizardDialog({
<StepIndicator steps={STEPS} currentStep={step} /> <StepIndicator steps={STEPS} currentStep={step} />
{step == 0 && ( {step == 0 && (
<TextEntry <TextEntry
placeholder="Enter Face Name" placeholder={t("description.placeholder")}
onSave={(name) => { onSave={(name) => {
setName(name); setName(name);
setStep(1); setStep(1);