Profile edit form

'use client';

import { Button, FormField, FormProvider, Input, Select, Textarea, useForm } from '@hey-mike/tungsten';

function ProfileFields() {
  const form = useForm();
  return (
    <form onSubmit={form.handleSubmit} className="flex w-full max-w-sm flex-col gap-4" noValidate>
      <FormField name="name" label="Display name" required validate={(v) => (v ? undefined : 'Required')}>
        <Input autoComplete="name" />
      </FormField>
      <FormField name="role" label="Role">
        <Select>
          <option value="engineer">Engineer</option>
          <option value="designer">Designer</option>
          <option value="manager">Manager</option>
        </Select>
      </FormField>
      <FormField name="bio" label="Bio" help="A short sentence shown on your public profile.">
        <Textarea placeholder="Tell us about yourself" />
      </FormField>
      <Button type="submit" variant="primary" size="md">
        Save changes
      </Button>
    </form>
  );
}

export default function ProfileEditRecipe() {
  return (
    <FormProvider
      defaultValues={{ name: 'Ada Lovelace', role: 'engineer', bio: 'Building reliable systems.' }}
    >
      <ProfileFields />
    </FormProvider>
  );
}