Initial commit

components/contact-form.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { useToast } from "@/components/ui/use-toast"
+import { submitContactForm } from "@/app/actions/contact"
+import { useFormStatus } from "react-dom"
+import { motion } from "framer-motion"
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      type="submit"
+      className="w-full bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600 cursor-not-allowed"
+      disabled={true || pending}
+    >
+      {pending ? "Invio..." : "Invia messaggio (in arrivo)"}
+    </Button>
+  )
+}
+
+export function ContactForm() {
+  const { toast } = useToast()
+  const formRef = useRef<HTMLFormElement>(null)
+  const [formState, setFormState] = useState<{
+    success?: boolean
+    message?: string
+  }>({})
+
+  async function handleSubmit(formData: FormData) {
+    // Reset form state
+    setFormState({})
+
+    // Submit the form
+    const result = await submitContactForm(formData)
+
+    // Update form state
+    setFormState(result)
+
+    // Show toast notification
+    toast({
+      title: result.success ? "Messaggio inviato!" : "Errore",
+      description: result.message,
+      variant: result.success ? "default" : "destructive",
+    })
+
+    // Reset form if successful
+    if (result.success && formRef.current) {
+      formRef.current.reset()
+    }
+  }
+
+  return (
+    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
+      <form
+        ref={formRef}
+        action={handleSubmit}
+        className="space-y-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700"
+      >
+        {formState.message && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            transition={{ duration: 0.3 }}
+            className={`p-3 rounded-md ${
+              formState.success
+                ? "bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-300"
+                : "bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-300"
+            }`}
+          >
+            {formState.message}
+          </motion.div>
+        )}
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="firstName">Nome</Label>
+            <Input id="firstName" name="firstName" required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="lastName">Cognome</Label>
+            <Input id="lastName" name="lastName" required />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" name="email" type="email" required />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="company">Azienda</Label>
+          <Input id="company" name="company" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="message">Messaggio</Label>
+          <Textarea id="message" name="message" required className="min-h-[120px]" />
+        </div>
+        <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+          <SubmitButton />
+        </motion.div>
+      </form>
+    </motion.div>
+  )
+}