lunar add form

import {
Form,
FormField,
FormItem,
FormLabel,
FormDescription,
FormMessage,
useFormField,
} from '@/components/ui/form';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
 
const formSchema = z.object({
email: z.string().email('Invalid email address'),
password: z.string().min(8, 'Password must be at least 8 characters'),
});
 
type FormData = z.infer<typeof formSchema>;
 
export function LoginForm() {
const form = useForm<FormData>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    email: '',
    password: '',
  },
});
 
const onSubmit = (data: FormData) => {
  console.log(data);
};
 
return (
  <Form {...form}>
    <View className="gap-4">
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <Input
              value={field.value}
              onChangeText={field.onChange}
              onBlur={field.onBlur}
              keyboardType="email-address"
              autoCapitalize="none"
            />
            <FormMessage />
          </FormItem>
        )}
      />
 
      <FormField
        control={form.control}
        name="password"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Password</FormLabel>
            <Input
              value={field.value}
              onChangeText={field.onChange}
              onBlur={field.onBlur}
              secureTextEntry
            />
            <FormMessage />
          </FormItem>
        )}
      />
 
      <Button onPress={form.handleSubmit(onSubmit)}>
        Sign In
      </Button>
    </View>
  </Form>
);
}

<FormField
control={form.control}
name="username"
render={({ field }) => (
  <FormItem>
    <FormLabel>Username</FormLabel>
    <Input
      value={field.value}
      onChangeText={field.onChange}
    />
    <FormDescription>
      This is your public display name.
    </FormDescription>
    <FormMessage />
  </FormItem>
)}
/>

<FormField
control={form.control}
name="terms"
render={({ field }) => (
  <FormItem>
    <Checkbox
      checked={field.value}
      onCheckedChange={field.onChange}
    >
      <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
    </Checkbox>
    <FormMessage />
  </FormItem>
)}
/>

<FormField
control={form.control}
name="country"
render={({ field }) => (
  <FormItem>
    <FormLabel>Country</FormLabel>
    <Select value={field.value} onValueChange={field.onChange}>
      <SelectTrigger>
        <SelectValue placeholder="Select country" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="us" label="United States" />
        <SelectItem value="uk" label="United Kingdom" />
        <SelectItem value="ca" label="Canada" />
      </SelectContent>
    </Select>
    <FormMessage />
  </FormItem>
)}
/>