fix error for deployment on vercel
This commit is contained in:
@@ -1,77 +1,81 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import {useState} from "react";
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
const [form, setForm] = useState({ name: "", email: "", message: "" });
|
const [form, setForm] = useState({name: "", email: "", message: ""});
|
||||||
const [success, setSuccess] = useState(false);
|
const [success, setSuccess] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
const handleChange = (
|
const handleChange = (
|
||||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||||
) => {
|
) => {
|
||||||
setForm({ ...form, [e.target.name]: e.target.value });
|
setForm({...form, [e.target.name]: e.target.value});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Replace this with actual form submission logic (e.g., API call)
|
// Replace this with actual form submission logic (e.g., API call)
|
||||||
try {
|
try {
|
||||||
// Simulate a successful submission
|
// Simulate a successful submission
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||||
setSuccess(true);
|
setSuccess(true);
|
||||||
setForm({ name: "", email: "", message: "" });
|
setForm({name: "", email: "", message: ""});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError("Failed to send message. Please try again.");
|
//use err to avoid unused variable warning
|
||||||
}
|
if (err instanceof Error) {
|
||||||
};
|
setError("Failed to send message. Please try again.");
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
}
|
||||||
<section id="contact" className="p-10 ">
|
};
|
||||||
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
|
||||||
Contact Me
|
return (
|
||||||
</h2>
|
<section id="contact" className="p-10 ">
|
||||||
<form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
|
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
||||||
{success && (
|
Contact Me
|
||||||
<p className="text-green-500">
|
</h2>
|
||||||
Your message has been sent successfully!
|
<form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
|
||||||
</p>
|
{success && (
|
||||||
)}
|
<p className="text-green-500">
|
||||||
{error && <p className="text-red-500">{error}</p>}
|
Your message has been sent successfully!
|
||||||
<input
|
</p>
|
||||||
type="text"
|
)}
|
||||||
name="name"
|
{error && <p className="text-red-500">{error}</p>}
|
||||||
placeholder="Name"
|
<input
|
||||||
className="w-full p-2 border rounded dark:text-white"
|
type="text"
|
||||||
required
|
name="name"
|
||||||
value={form.name}
|
placeholder="Name"
|
||||||
onChange={handleChange}
|
className="w-full p-2 border rounded dark:text-white"
|
||||||
/>
|
required
|
||||||
<input
|
value={form.name}
|
||||||
type="email"
|
onChange={handleChange}
|
||||||
name="email"
|
/>
|
||||||
placeholder="Email"
|
<input
|
||||||
className="w-full p-2 border rounded dark:text-white"
|
type="email"
|
||||||
required
|
name="email"
|
||||||
value={form.email}
|
placeholder="Email"
|
||||||
onChange={handleChange}
|
className="w-full p-2 border rounded dark:text-white"
|
||||||
/>
|
required
|
||||||
<textarea
|
value={form.email}
|
||||||
name="message"
|
onChange={handleChange}
|
||||||
placeholder="Message"
|
/>
|
||||||
className="w-full p-2 border rounded dark:text-white"
|
<textarea
|
||||||
rows={5}
|
name="message"
|
||||||
required
|
placeholder="Message"
|
||||||
value={form.message}
|
className="w-full p-2 border rounded dark:text-white"
|
||||||
onChange={handleChange}
|
rows={5}
|
||||||
></textarea>
|
required
|
||||||
<button
|
value={form.message}
|
||||||
type="submit"
|
onChange={handleChange}
|
||||||
className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
|
></textarea>
|
||||||
>
|
<button
|
||||||
Send
|
type="submit"
|
||||||
</button>
|
className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
|
||||||
</form>
|
>
|
||||||
</section>
|
Send
|
||||||
);
|
</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function NotFound() {
|
export default function NotFound() {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
|
<div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
|
||||||
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
||||||
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
||||||
404
|
404
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
||||||
Oops! The page you're looking for doesn't exist.
|
Oops! The page you're looking for doesn't exist.
|
||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className="mt-6 inline-block text-blue-500 hover:underline"
|
className="mt-6 inline-block text-blue-500 hover:underline"
|
||||||
>
|
>
|
||||||
Go Back Home
|
Go Back Home
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user