96:I[903690,["/chat-static/_next/static/immutable/chunks/3hmvfqhb1wjbx.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/1zle3kaaa_lvx.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/0heeygr47hr_f.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/1qzwe0rajlmqc.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1t-5ii03z1a-h.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/3a45k4axgp07r.js","/chat-static/_next/static/immutable/chunks/2kl2jlmyk-463.js","/chat-static/_next/static/immutable/chunks/3vbkwjct72k1u.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1sh8cfxr_pg4d.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/3hmvfqhb1wjbx.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/1zle3kaaa_lvx.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/0heeygr47hr_f.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/1qzwe0rajlmqc.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1t-5ii03z1a-h.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/3a45k4axgp07r.js","/chat-static/_next/static/immutable/chunks/2kl2jlmyk-463.js","/chat-static/_next/static/immutable/chunks/3vbkwjct72k1u.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1sh8cfxr_pg4d.js"],"SWRDataProvider"] 98:T1b44,[V0_FILE]typescriptreact:file="components/contact-form.tsx" "use client" import * as React from "react" import { Card, CardTitle, CardHeader, CardDescription, CardContent, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" import { contactFormAction } from "@/lib/actions" import { Check } from "lucide-react" export function ContactForm({ className }: React.ComponentProps) { const [state, formAction, pending] = React.useActionState(contactFormAction, { defaultValues: { name: "", email: "", message: "", }, success: false, errors: null, }) return ( How can we help? Need help with your project? We're here to assist you.

{state.success ? (

Your message has been sent. Thank you.

) : null}

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>
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="lib/actions.ts"
"use server"

import { contactFormSchema } from "@/lib/schema"
import { z } from "zod"

export async function contactFormAction(_prevState: unknown, formData: FormData) {
  const defaultValues = z.record(z.string(), z.string()).parse(Object.fromEntries(formData.entries()))

try {
    const data = contactFormSchema.parse(Object.fromEntries(formData))

// This simulates a slow response like a form submission.
    // Replace this with your actual form submission logic.
    await new Promise((resolve) => setTimeout(resolve, 1000))

console.log(data)

return {
      defaultValues: {
        name: "",
        email: "",
        message: "",
      },
      success: true,
      errors: null,
    }
  } catch (error) {
    if (error instanceof z.ZodError) {
      return {
        defaultValues,
        success: false,
        errors: Object.fromEntries(
          Object.entries(error.flatten().fieldErrors).map(([key, value]) => [key, value?.join(", ")]),
        ),
      }
    }

return {
      defaultValues,
      success: false,
      errors: null,
    }
  }
}

[V0_FILE]typescriptreact:file="lib/schema.ts"
import { z } from "zod"

export const contactFormSchema = z.object({
  name: z
    .string()
    .min(2, { message: "Name must be at least 2 characters" })
    .max(32, { message: "Name must be at most 32 characters" }),
  email: z.string().email({ message: "Invalid email address" }),
  message: z
    .string()
    .min(2, { message: "Message must be at least 2 characters" })
    .max(1000, { message: "Message must be at most 1000 characters" }),
})

[V0_FILE]typescriptreact:file="app/page.tsx" entry="true"
import { ContactForm } from "@/components/contact-form"

export default function Page() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <ContactForm />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"

const geistSans = Geist({
  subsets: ["latin"],
  variable: "--font-sans",
})
const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
})

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>{children}</body>
    </html>
  )
}
8c:["$","$L96",null,{"chatId":"aoWLFg22NFS","children":["$","$L97",null,{"data":{"@\"active-block\",\"aoWLFg22NFS\",":{"id":"b_k91BJoNiyZj","messageId":"66FVKmKNQKeW02RSVgXlDgIe7cjMsXTk","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Next.js + Forms","type":"code-project","project":"Next.js + Forms"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"aoWLFg22NFS\",":false,"":null},"children":"$L99"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This