less flex.
More function.

'use client';
import { useState } from 'react';
import { Button } from './components/antiflex/button';
import { TextField } from './components/antiflex/text-field';

export function ProjectForm() {
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  return (
    <form noValidate onSubmit={(event) => {
      event.preventDefault();
      const field = event.currentTarget.elements
        .namedItem('project') as HTMLInputElement;
      const name = field.value.trim();
      setError(name ? '' : 'Enter a project name.');
      setMessage(name ? `Sample project “${name}” created.` : '');
      if (!name) field.focus();
    }}>
      <TextField label="Project name" name="project"
        placeholder="e.g. Customer portal"
        description="A name your team will recognize."
        required error={error} />
      <Button type="submit">Create project</Button>
      <p role="status">{message}</p>
    </form>
  );
}