-
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit fixes the style issues introduced in 686ac14 according to the output from Prettier. Details: None
- Loading branch information
1 parent
686ac14
commit 2dfd4ac
Showing
4 changed files
with
224 additions
and
217 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,76 @@ | ||
"use client" | ||
"use client"; | ||
|
||
import { Button } from "@/components/ui/button" | ||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" | ||
import { Input } from "@/components/ui/input" | ||
import { Label } from "@/components/ui/label" | ||
import { Textarea } from "@/components/ui/textarea" | ||
import { useToast } from "@/hooks/use-toast" | ||
import { useState, useRef } from "react" | ||
import { Button } from "@/components/ui/button"; | ||
import { | ||
Card, | ||
CardContent, | ||
CardDescription, | ||
CardHeader, | ||
CardTitle, | ||
} from "@/components/ui/card"; | ||
import { Input } from "@/components/ui/input"; | ||
import { Label } from "@/components/ui/label"; | ||
import { Textarea } from "@/components/ui/textarea"; | ||
import { useToast } from "@/hooks/use-toast"; | ||
import { useState, useRef } from "react"; | ||
|
||
export default function ContactForm() { | ||
const [isLoading, setIsLoading] = useState(false) | ||
const { toast } = useToast() | ||
const formRef = useRef<HTMLFormElement>(null) // Add form reference | ||
async function onSubmit(event: React.FormEvent<HTMLFormElement>) { | ||
event.preventDefault() | ||
setIsLoading(true) | ||
const [isLoading, setIsLoading] = useState(false); | ||
const { toast } = useToast(); | ||
const formRef = useRef<HTMLFormElement>(null); // Add form reference | ||
async function onSubmit(event: React.FormEvent<HTMLFormElement>) { | ||
event.preventDefault(); | ||
setIsLoading(true); | ||
|
||
// Simulate form submission | ||
await new Promise((resolve) => setTimeout(resolve, 1000)) | ||
|
||
setIsLoading(false) | ||
toast({ | ||
title: "Message sent", | ||
description: "We'll get back to you within 3 business days.", | ||
}) | ||
|
||
|
||
formRef.current?.reset() | ||
} | ||
// Simulate form submission | ||
await new Promise((resolve) => setTimeout(resolve, 1000)); | ||
|
||
return ( | ||
<Card className="w-full max-w-md"> | ||
<CardHeader> | ||
<CardTitle>Contact Us</CardTitle> | ||
<CardDescription> | ||
Report a bug, request a feature, or submit feedback | ||
</CardDescription> | ||
</CardHeader> | ||
<CardContent> | ||
<form ref={formRef} onSubmit={onSubmit} className="space-y-4"> | ||
|
||
<div className="space-y-2"> | ||
<Label htmlFor="email">Email</Label> | ||
<Input id="email" type="email" placeholder="Enter your email" required /> | ||
</div> | ||
<div className="space-y-2"> | ||
<Label htmlFor="message">Message</Label> | ||
<Textarea | ||
id="message" | ||
placeholder="Type your message here" | ||
className="min-h-[100px]" | ||
required | ||
/> | ||
</div> | ||
<Button type="submit" className="w-full" disabled={isLoading}> | ||
{isLoading ? "Sending..." : "Send message"} | ||
</Button> | ||
</form> | ||
</CardContent> | ||
</Card> | ||
) | ||
} | ||
setIsLoading(false); | ||
toast({ | ||
title: "Message sent", | ||
description: "We'll get back to you within 3 business days.", | ||
}); | ||
|
||
formRef.current?.reset(); | ||
} | ||
|
||
return ( | ||
<Card className="w-full max-w-md"> | ||
<CardHeader> | ||
<CardTitle>Contact Us</CardTitle> | ||
<CardDescription> | ||
Report a bug, request a feature, or submit feedback | ||
</CardDescription> | ||
</CardHeader> | ||
<CardContent> | ||
<form ref={formRef} onSubmit={onSubmit} className="space-y-4"> | ||
<div className="space-y-2"> | ||
<Label htmlFor="email">Email</Label> | ||
<Input | ||
id="email" | ||
type="email" | ||
placeholder="Enter your email" | ||
required | ||
/> | ||
</div> | ||
<div className="space-y-2"> | ||
<Label htmlFor="message">Message</Label> | ||
<Textarea | ||
id="message" | ||
placeholder="Type your message here" | ||
className="min-h-[100px]" | ||
required | ||
/> | ||
</div> | ||
<Button | ||
type="submit" | ||
className="w-full" | ||
disabled={isLoading} | ||
> | ||
{isLoading ? "Sending..." : "Send message"} | ||
</Button> | ||
</form> | ||
</CardContent> | ||
</Card> | ||
); | ||
} |
Oops, something went wrong.