Settings form

'use client';

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

function SettingsFields() {
  const form = useForm();
  return (
    <form onSubmit={form.handleSubmit} className="flex w-full max-w-md flex-col gap-6" noValidate>
      <section className="flex flex-col gap-4">
        <h3 className="text-ink-2 text-2xs font-mono font-bold uppercase tracking-label">Account</h3>
        <FormField name="email" label="Email" help="Used for sign-in and notifications.">
          <Input type="email" autoComplete="email" />
        </FormField>
        <FormField name="timezone" label="Timezone">
          <Select>
            <option value="utc">UTC</option>
            <option value="pt">Pacific</option>
            <option value="et">Eastern</option>
          </Select>
        </FormField>
      </section>
      <section className="flex flex-col gap-4">
        <h3 className="text-ink-2 text-2xs font-mono font-bold uppercase tracking-label">
          Notifications
        </h3>
        <FormField name="digest" label="Email digest" help="How often we summarize activity.">
          <Select>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="off">Off</option>
          </Select>
        </FormField>
      </section>
      <Button type="submit" variant="primary" size="md">
        Save settings
      </Button>
    </form>
  );
}

export default function SettingsRecipe() {
  return (
    <FormProvider defaultValues={{ email: 'ada@example.com', timezone: 'utc', digest: 'weekly' }}>
      <SettingsFields />
    </FormProvider>
  );
}