Skip to content

Commit 10afb2a

Browse files
YASH-YADAV-dynamoYASH-YADAV-dynamo
committed
fixed navbar
1 parent 698887e commit 10afb2a

File tree

2 files changed

+107
-137
lines changed

2 files changed

+107
-137
lines changed

‎src/components/Contact.jsx

Lines changed: 48 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useState } from "react";
22
import axios from "axios";
3-
import env from "react-dotenv";
4-
53
import {
64
FaDiscord,
75
FaReddit,
@@ -12,21 +10,23 @@ import {
1210
} from 'react-icons/fa';
1311

1412
const Contact = () => {
15-
const url = env.url;
13+
const url = process.env.REACT_APP_API_URL;
1614
const [data, setData] = useState({
1715
name: "",
1816
email: "",
1917
message: "",
2018
});
19+
2120
function handle(e) {
2221
const newData = { ...data };
2322
newData[e.target.id] = e.target.value;
2423
setData(newData);
2524
console.log(newData);
2625
}
26+
2727
function submit(e) {
2828
e.preventDefault();
29-
console.log("click");
29+
console.log("Submitting to:", url);
3030
axios
3131
.post(url, {
3232
name: data.name,
@@ -35,93 +35,61 @@ const Contact = () => {
3535
})
3636
.then((res) => {
3737
console.log(res.data);
38-
alert("Thanks for Equiring we will shortly contact you :)");
38+
alert("Thanks for inquiring, we will contact you shortly :)");
3939
setData({
4040
name: "",
4141
email: "",
4242
message: "",
4343
});
44+
})
45+
.catch((error) => {
46+
console.error("Error submitting form:", error);
47+
alert("There was an error submitting the form. Please try again.");
4448
});
4549
}
50+
4651
return (
4752
<div>
48-
<section class="text-gray-400 bg-gray-1000 body-font ">
49-
<div class="container px-5 py-24 mx-auto">
50-
<div class="flex flex-col text-center w-full mb-12">
51-
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
53+
<section className="text-gray-400 bg-gray-1000 body-font">
54+
<div className="container px-5 py-24 mx-auto">
55+
<div className="flex flex-col text-center w-full mb-12">
56+
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
5257
Contact Us
5358
</h1>
54-
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
5559
</div>
56-
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
57-
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
58-
<div className="w-12 h-10 flex flex-col items-center">
59-
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
60-
</div>
61-
<div className="w-12 h-10 flex flex-col items-center">
62-
<a href="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
63-
</div>
64-
<div className="w-12 h-10 flex flex-col items-center">
65-
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
66-
</div>
67-
<div className="w-12 h-10 flex flex-col items-center">
68-
<a href="https://www.linkedin.com/company/fosscu/" target="linkedin" ><FaLinkedin className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
69-
</div>
70-
<div className="w-12 h-10 flex flex-col items-center">
71-
<a href="https://twitter.com/fosscuk" target="twitter" ><FaTwitter className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
72-
</div>
73-
<div className="w-12 h-10 flex flex-col items-center">
74-
<a href= "https://matrix.to/#/#fosscu:matrix.org" target="Matrix" ><FaNetworkWired className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
75-
</div>
60+
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
61+
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
62+
<SocialIcon href="https://discord.com/invite/4xruwjjU9B" Icon={FaDiscord} />
63+
<SocialIcon href="https://www.reddit.com/r/fosscu/" Icon={FaReddit} />
64+
<SocialIcon href="Mailto:[email protected]" Icon={FaEnvelope} />
65+
<SocialIcon href="https://www.linkedin.com/company/fosscu/" Icon={FaLinkedin} />
66+
<SocialIcon href="https://twitter.com/fosscuk" Icon={FaTwitter} />
67+
<SocialIcon href="https://matrix.to/#/#fosscu:matrix.org" Icon={FaNetworkWired} />
7668
</div>
7769
</div>
78-
<div class="lg:w-1/2 md:w-2/3 mx-auto">
79-
<form class="flex flex-wrap -m-2" onSubmit={(e) => submit(e)}>
80-
<div class="p-2 w-1/2">
81-
<div class="">
82-
<label for="name" class="leading-7 text-sm text-gray-400">
83-
Name
84-
</label>
85-
<input
86-
type="text"
87-
id="name"
88-
onChange={(e) => handle(e)}
89-
value={data.name}
90-
class="w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
91-
/>
92-
</div>
93-
</div>
94-
<div class="p-2 w-1/2">
95-
<div class="">
96-
<label for="email" class="leading-7 text-sm text-gray-400">
97-
Email
98-
</label>
99-
<input
100-
type="email"
101-
id="email"
102-
name="email"
103-
onChange={(e) => handle(e)}
104-
value={data.email}
105-
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
106-
/>
107-
</div>
108-
</div>
109-
<div class="p-2 w-full">
110-
<div class="">
111-
<label for="message" class="leading-7 text-sm text-gray-400">
112-
Message
113-
</label>
114-
<textarea
115-
id="message"
116-
name="message"
117-
onChange={(e) => handle(e)}
118-
value={data.message}
119-
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
120-
></textarea>
121-
</div>
122-
</div>
123-
<div class="p-2 w-full">
124-
<button class="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
70+
<div className="lg:w-1/2 md:w-2/3 mx-auto">
71+
<form className="flex flex-wrap -m-2" onSubmit={submit}>
72+
<InputField
73+
id="name"
74+
label="Name"
75+
value={data.name}
76+
onChange={handle}
77+
/>
78+
<InputField
79+
id="email"
80+
label="Email"
81+
type="email"
82+
value={data.email}
83+
onChange={handle}
84+
/>
85+
<TextArea
86+
id="message"
87+
label="Message"
88+
value={data.message}
89+
onChange={handle}
90+
/>
91+
<div className="p-2 w-full">
92+
<button className="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
12593
Submit
12694
</button>
12795
</div>
@@ -133,4 +101,6 @@ const Contact = () => {
133101
);
134102
};
135103

136-
export default Contact;
104+
// ... (SocialIcon, InputField, and TextArea components remain the same)
105+
106+
export default Contact;

‎src/components/Navbar.jsx

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -159,65 +159,65 @@ const Navbar = () => {
159159
</h1>
160160
</center>
161161
<ul className="uppercase p-4">
162-
<li
163-
className={`p-4 ${
164-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
165-
} border-b border-gray-600 `}
166-
>
167-
<Link to="/" onClick={() => handleLinkClick("/")}>
168-
{" "}
169-
Home{" "}
170-
</Link>{" "}
171-
</li>
172-
<li
173-
className={`p-4 ${
174-
activeLink === "/about"
175-
? "text-[#0DFF1C]"
176-
: "hover:text-[#0DFF1C]"
177-
} border-b border-gray-600 `}
178-
>
179-
<Link to="/about">About</Link>
180-
</li>
181-
<li
182-
className={`p-4 ${
183-
activeLink === "/team"
184-
? "text-[#0DFF1C]"
185-
: "hover:text-[#0DFF1C]"
186-
} border-b border-gray-600 `}
187-
>
188-
<Link to="/team"> Team </Link>{" "}
189-
</li>
190-
<li
191-
className={`p-4 ${
192-
activeLink === "/resource"
193-
? "text-[#0DFF1C]"
194-
: "hover:text-[#0DFF1C]"
195-
} border-b border-gray-600 `}
196-
>
197-
<Link to="/resource">Resources</Link>{" "}
198-
</li>
199-
<li className={`p-4 border-b border-gray-600 `}>
200-
<a href="https://docs.fosscu.org">Handbook</a>{" "}
201-
</li>
202-
<li className={`p-4 border-b border-gray-600 `}>
203-
<a href="https://github.com/FOSS-Community">Projects</a>
204-
</li>
205-
<li
206-
className={`p-4 ${
207-
activeLink === "/contact"
208-
? "text-[#0DFF1C]"
209-
: "hover:text-[#0DFF1C]"
210-
} border-b border-gray-600 `}
211-
>
212-
<Link to="/contact">Contact</Link>
213-
</li>
214-
<li className={`p-4 border-b border-gray-600 `}>
215-
<a href="https://lu.ma/fosscu">Calender</a>
216-
</li>
217-
<li className={`p-4 border-b border-gray-600 `}>
218-
<a href="https://github.com/FOSS-Community/">Contribute</a>
219-
</li>
220-
</ul>
162+
<li
163+
className={`p-4 ${
164+
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
165+
} border-b border-gray-600`}
166+
>
167+
<Link to="/" onClick={() => handleLinkClick("/")}>
168+
Home
169+
</Link>
170+
</li>
171+
<li
172+
className={`p-4 ${
173+
activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
174+
} border-b border-gray-600`}
175+
>
176+
<Link to="/about">About</Link>
177+
</li>
178+
<li
179+
className={`p-4 ${
180+
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
181+
} border-b border-gray-600`}
182+
>
183+
<Link to="/team">Team</Link>
184+
</li>
185+
<li
186+
className={`p-4 ${
187+
activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
188+
} border-b border-gray-600`}
189+
>
190+
<Link to="/resource">Resources</Link>
191+
</li>
192+
<li className="p-4 border-b border-gray-600">
193+
<a href="https://docs.fosscu.org">Handbook</a>
194+
</li>
195+
<li className="p-4 border-b border-gray-600">
196+
<a href="https://github.com/FOSS-Community">Projects</a>
197+
</li>
198+
<li
199+
className={`p-4 ${
200+
activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
201+
} border-b border-gray-600`}
202+
>
203+
<Link to="/contact">Contact</Link>
204+
</li>
205+
<li className="p-4 border-b border-gray-600">
206+
<a href="https://lu.ma/fosscu">Calendar</a>
207+
</li>
208+
<li className="p-4 border-b border-gray-600">
209+
<a href="https://github.com/FOSS-Community/">Contribute</a>
210+
</li>
211+
<li
212+
className={`p-4 ${
213+
activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
214+
}`}
215+
>
216+
<Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
217+
Shipyard
218+
</Link>
219+
</li>
220+
</ul>
221221
</div>
222222
</div>
223223
<Outlet />

0 commit comments

Comments
 (0)