Text field and text area

"use client";
import * as React from "react";
import { TextArea, TextField } from "@/components/ui/notchset/text-field";

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

export default function TextFieldDemo() {
  const [email, setEmail] = React.useState("ana@larkspur");
  return (
    <div className="grid w-full max-w-[560px] grid-cols-2 gap-3.5 max-sm:grid-cols-1">
      <TextField label="Deal name" placeholder="Airtable renewal" />
      <TextField label="Amount" inputMode="decimal" defaultValue="48,000" hint="In USD, before tax" />
      <TextField label="Work email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} error={EMAIL.test(email) ? undefined : "Enter a full address, like ana@larkspur.com"} />
      <TextField label="Owner" defaultValue="Ana Ruiz" disabled />
      <TextArea fieldClassName="col-span-full" label="Message" placeholder="Write your message…" />
    </div>
  );
}