4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T1427,"use client" import * as React from "react" import { Card, CardTitle, CardHeader, CardDescription, CardContent, CardFooter, } from "@/registry/corecn/ui/card" import { Input } from "@/registry/corecn/ui/input" import { Label } from "@/registry/corecn/ui/label" import { Button } from "@/registry/corecn/ui/button" import { Textarea } from "@/registry/corecn/ui/textarea" import { z } from "zod" const exampleFormSchema = z.object({ name: z.string().min(1), email: z.string().email(), message: z.string().min(1), }) export function ExampleForm() { const [pending, setPending] = React.useState(false) const [state, setState] = React.useState({ defaultValues: { name: "", email: "", message: "", }, success: false, errors: { name: "", email: "", message: "", }, }) const handleSubmit = React.useCallback( (e: React.FormEvent) => { e.preventDefault() setPending(true) const formData = new FormData(e.target as HTMLFormElement) const data = Object.fromEntries(formData.entries()) const result = exampleFormSchema.safeParse(data) if (!result.success) { setState({ ...state, errors: Object.fromEntries( Object.entries(result.error.flatten().fieldErrors).map( ([key, value]) => [key, value?.[0] ?? ""] ) ) as Record, }) setPending(false) return } setPending(false) }, [state] ) return (

How can we help? Need help with your project? We're here to assist you.

Name {state.errors?.name && (

{state.errors.name}

)}

Email {state.errors?.email && (

{state.errors.email}

)}

Message

{state.errors?.message && (
              <p id="error-message" className="text-destructive text-sm">
                {state.errors.message}
              </p>
            )}
          </div>
        </CardContent>
        <CardFooter>
          <Button type="submit" size="sm" disabled={pending}>
            {pending ? "Sending..." : "Send Message"}
          </Button>
        </CardFooter>
      </Card>
    </form>
  )
}
49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","zod",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod"}]]}]}]]}],["$","$L4a",null,{"namespace":"@corecn","registryDependencies":["button","input","label","textarea","card"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/corecn/blocks/example-form/example-form.tsx","content":"$4c","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>