مكوّنك الأول

'use server'
import { z } from 'zod'
import type { FormActionState } from 'topclassui/form'

const schema = z.object({ email: z.email('Enter a valid email') })

export async function subscribe(_state: FormActionState, formData: FormData): Promise<FormActionState> {
  const parsed = schema.safeParse(Object.fromEntries(formData))
  if (!parsed.success) return { errors: z.flattenError(parsed.error).fieldErrors }

  await saveSubscriber(parsed.data.email)
  return {}
}

import { Field } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { Button } from 'topclassui/button'
import { Form } from 'topclassui/form'
import { subscribe } from './actions'

export default function Page() {
  async function send(formData: FormData) {
    'use server'
    await subscribe({}, formData)
  }

  return (
    <Form action={send} className="flex flex-col gap-4">
      <Field name="email" label="Email" hint="We never share it" required>
        {(control) => <Input {...control} type="email" autoComplete="email" />}
      </Field>
      <Button type="submit">Subscribe</Button>
    </Form>
  )
}

'use client'
import { FormAction } from 'topclassui/form'
import { FieldLive } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { Button } from 'topclassui/button'
import type { subscribe } from './actions'

export function SubscribeForm({ action }: { action: typeof subscribe }) {
  return (
    <FormAction action={action}>
      <FieldLive name="email" label="Email" required>
        {(control) => <Input {...control} type="email" />}
      </FieldLive>
      <Button type="submit">Subscribe</Button>
    </FormAction>
  )
}

import { subscribe } from './actions'
import { SubscribeForm } from './subscribe-form'

export default function Page() {
  return <SubscribeForm action={subscribe} />
}

async function subscribe(formData: FormData) {
  await fetch('/api/subscribe', { method: 'POST', body: formData })
}

<form action={subscribe}>…</form>