-
Notifications
You must be signed in to change notification settings - Fork 255
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1cd9517
commit cd7cb99
Showing
4 changed files
with
130 additions
and
128 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,42 +1,42 @@ | ||
| import github from "../../assets/Icons/github.png"; | ||
| import instagram from "../../assets/Icons/Instagram.png"; | ||
| import twitter from "../../assets/Icons/twitter.png"; | ||
| import Form from "./Form"; | ||
| import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect | ||
| // import github from "../../assets/Icons/github.png"; | ||
| // import instagram from "../../assets/Icons/Instagram.png"; | ||
| // import twitter from "../../assets/Icons/twitter.png"; | ||
| // import Form from "./Form"; | ||
| // import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect | ||
|
|
||
| const Connect = () => { | ||
| const playSound = () => { | ||
| const audio = new Audio(clickSound); | ||
| audio.play(); | ||
| }; | ||
| // const Connect = () => { | ||
| // const playSound = () => { | ||
| // const audio = new Audio(clickSound); | ||
| // audio.play(); | ||
| // }; | ||
|
|
||
| return ( | ||
| <div className="px-[75px] mb-[80px] md:flex md:flex-row gap-5"> | ||
| <div className="flex-1"> | ||
| <h1 className="text-4xl font-bold">Connect with <span className="text-primary-green">Us</span></h1> | ||
| <button | ||
| className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white mb-4" | ||
| onClick={playSound} | ||
| > | ||
| Click Me | ||
| </button> | ||
| <div className="flex my-4"> | ||
| <a href="https://github.com/gauravsingh1281"> | ||
| <img src={github} alt="" className="w-8 h-8 mr-2" /> | ||
| </a> | ||
| <a href="https://www.instagram.com/gauravsingh1281"> | ||
| <img src={instagram} alt="" className="w-10 h-10 mr-2" /> | ||
| </a> | ||
| <a href="https://twitter.com/gauravsingh1281"> | ||
| <img src={twitter} alt="" className="w-8 h-8" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div className="flex-1 md:mt-5"> | ||
| <Form /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| // return ( | ||
| // <div className="px-[75px] mb-[80px] md:flex md:flex-row gap-5"> | ||
| // <div className="flex-1"> | ||
| // <h1 className="text-4xl font-bold">Connect with <span className="text-primary-green">Us</span></h1> | ||
| // <button | ||
| // className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white mb-4" | ||
| // onClick={playSound} | ||
| // > | ||
| // Click Me | ||
| // </button> | ||
| // <div className="flex my-4"> | ||
| // <a href="https://github.com/gauravsingh1281"> | ||
| // <img src={github} alt="" className="w-8 h-8 mr-2" /> | ||
| // </a> | ||
| // <a href="https://www.instagram.com/gauravsingh1281"> | ||
| // <img src={instagram} alt="" className="w-10 h-10 mr-2" /> | ||
| // </a> | ||
| // <a href="https://twitter.com/gauravsingh1281"> | ||
| // <img src={twitter} alt="" className="w-8 h-8" /> | ||
| // </a> | ||
| // </div> | ||
| // </div> | ||
| // <div className="flex-1 md:mt-5"> | ||
| // <Form /> | ||
| // </div> | ||
| // </div> | ||
| // ); | ||
| // } | ||
|
|
||
| export default Connect; | ||
| // export default Connect; |
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,95 +1,95 @@ | ||
| import { useForm } from "react-hook-form"; | ||
| import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect | ||
| // import { useForm } from "react-hook-form"; | ||
| // import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect | ||
|
|
||
| const Form = () => { | ||
| const { | ||
| register, | ||
| handleSubmit, | ||
| formState: { errors }, | ||
| reset, | ||
| } = useForm(); | ||
| // const Form = () => { | ||
| // const { | ||
| // register, | ||
| // handleSubmit, | ||
| // formState: { errors }, | ||
| // reset, | ||
| // } = useForm(); | ||
|
|
||
| const playSound = () => { | ||
| const audio = new Audio(clickSound); | ||
| audio.play(); | ||
| }; | ||
| // const playSound = () => { | ||
| // const audio = new Audio(clickSound); | ||
| // audio.play(); | ||
| // }; | ||
|
|
||
| const onSubmit = (data) => { | ||
| playSound(); // Play sound effect on submit | ||
| alert("Message sent successfully"); | ||
| console.log(data); | ||
| reset(); // reset form fields after successful submission | ||
| }; | ||
| // const onSubmit = (data) => { | ||
| // playSound(); // Play sound effect on submit | ||
| // alert("Message sent successfully"); | ||
| // console.log(data); | ||
| // reset(); // reset form fields after successful submission | ||
| // }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="flex flex-col gap-4 md:px-4"> | ||
| <div className="flex justify-between gap-2"> | ||
| {/* First Name Input */} | ||
| <input | ||
| type="text" | ||
| placeholder="First Name" | ||
| {...register("firstName", { required: "First name is required" })} | ||
| className="placeholder-text" | ||
| /> | ||
| <span className="pl-4 text-[#ff0000] text-sm"> | ||
| {errors.firstName && errors.firstName.message} | ||
| </span> | ||
| // return ( | ||
| // <div> | ||
| // <form onSubmit={handleSubmit(onSubmit)}> | ||
| // <div className="flex flex-col gap-4 md:px-4"> | ||
| // <div className="flex justify-between gap-2"> | ||
| // {/* First Name Input */} | ||
| // <input | ||
| // type="text" | ||
| // placeholder="First Name" | ||
| // {...register("firstName", { required: "First name is required" })} | ||
| // className="placeholder-text" | ||
| // /> | ||
| // <span className="pl-4 text-[#ff0000] text-sm"> | ||
| // {errors.firstName && errors.firstName.message} | ||
| // </span> | ||
|
|
||
| {/* Last Name Input */} | ||
| <input | ||
| type="text" | ||
| placeholder="Last Name" | ||
| {...register("lastName", { required: "Last name is required" })} | ||
| className="placeholder-text" | ||
| /> | ||
| <span className="pl-4 text-[#ff0000] text-sm"> | ||
| {errors.lastName && errors.lastName.message} | ||
| </span> | ||
| </div> | ||
| // {/* Last Name Input */} | ||
| // <input | ||
| // type="text" | ||
| // placeholder="Last Name" | ||
| // {...register("lastName", { required: "Last name is required" })} | ||
| // className="placeholder-text" | ||
| // /> | ||
| // <span className="pl-4 text-[#ff0000] text-sm"> | ||
| // {errors.lastName && errors.lastName.message} | ||
| // </span> | ||
| // </div> | ||
|
|
||
| {/* Email Input */} | ||
| <input | ||
| type="email" | ||
| placeholder="Write your Email here" | ||
| {...register("email", { | ||
| required: "Email is required", | ||
| pattern: { | ||
| value: /\S+@\S+\.\S+/, | ||
| message: "Email is not valid", | ||
| }, | ||
| })} | ||
| className="placeholder-text" | ||
| /> | ||
| <span className="pl-4 text-[#ff0000] text-sm"> | ||
| {errors.email && errors.email.message} | ||
| </span> | ||
| // {/* Email Input */} | ||
| // <input | ||
| // type="email" | ||
| // placeholder="Write your Email here" | ||
| // {...register("email", { | ||
| // required: "Email is required", | ||
| // pattern: { | ||
| // value: /\S+@\S+\.\S+/, | ||
| // message: "Email is not valid", | ||
| // }, | ||
| // })} | ||
| // className="placeholder-text" | ||
| // /> | ||
| // <span className="pl-4 text-[#ff0000] text-sm"> | ||
| // {errors.email && errors.email.message} | ||
| // </span> | ||
|
|
||
| {/* Message Input */} | ||
| <textarea | ||
| name="message" | ||
| cols="30" | ||
| rows="10" | ||
| placeholder="Your Message" | ||
| {...register("message", { required: "Message is required" })} | ||
| className="placeholder-text" | ||
| ></textarea> | ||
| <span className="pl-4 text-[#ff0000] text-sm"> | ||
| {errors.message && errors.message.message} | ||
| </span> | ||
| // {/* Message Input */} | ||
| // <textarea | ||
| // name="message" | ||
| // cols="30" | ||
| // rows="10" | ||
| // placeholder="Your Message" | ||
| // {...register("message", { required: "Message is required" })} | ||
| // className="placeholder-text" | ||
| // ></textarea> | ||
| // <span className="pl-4 text-[#ff0000] text-sm"> | ||
| // {errors.message && errors.message.message} | ||
| // </span> | ||
|
|
||
| {/* Submit Button */} | ||
| <button | ||
| className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white" | ||
| type="submit" | ||
| > | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; | ||
| // {/* Submit Button */} | ||
| // <button | ||
| // className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white" | ||
| // type="submit" | ||
| // > | ||
| // Submit | ||
| // </button> | ||
| // </div> | ||
| // </form> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
|
|
||
| export default Form; | ||
| // export default Form; |