Skip to content

Commit 9ccb803

Browse files
Mr-SunglassesMr-Sunglasses
authored
Merge pull request #349 from YASH-YADAV-dynamo/main
Added Shipyard button in mobile view
2 parents 88cce6a + f4a3a22 commit 9ccb803

File tree

2 files changed

+94
-138
lines changed

2 files changed

+94
-138
lines changed

‎src/components/Contact.jsx

Lines changed: 46 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState } from "react";
22
import axios from "axios";
3-
const url = process.env.REACT_APP_BACKEND_URL;
43
import {
54
FaDiscord,
65
FaReddit,
@@ -11,20 +10,23 @@ import {
1110
} from 'react-icons/fa';
1211

1312
const Contact = () => {
13+
const url = process.env.REACT_APP_BACKEND_URL;
1414
const [data, setData] = useState({
1515
name: "",
1616
email: "",
1717
message: "",
1818
});
19+
1920
function handle(e) {
2021
const newData = { ...data };
2122
newData[e.target.id] = e.target.value;
2223
setData(newData);
2324
console.log(newData);
2425
}
26+
2527
function submit(e) {
2628
e.preventDefault();
27-
console.log("click");
29+
console.log("Submitting to:", url);
2830
axios
2931
.post(url, {
3032
name: data.name,
@@ -33,95 +35,61 @@ const Contact = () => {
3335
})
3436
.then((res) => {
3537
console.log(res.data);
36-
alert("Thanks for Equiring we will shortly contact you :)");
38+
alert("Thanks for inquiring, we will contact you shortly :)");
3739
setData({
3840
name: "",
3941
email: "",
4042
message: "",
4143
});
44+
})
45+
.catch((error) => {
46+
console.error("Error submitting form:", error);
47+
alert("There was an error submitting the form. Please try again.");
4248
});
4349
}
50+
4451
return (
4552
<div>
46-
<section class="text-gray-400 bg-gray-1000 body-font ">
47-
<div class="container px-5 py-24 mx-auto">
48-
<div class="flex flex-col text-center w-full mb-12">
49-
<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">
5057
Contact Us
5158
</h1>
52-
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
5359
</div>
54-
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
55-
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
56-
<div className="w-12 h-10 flex flex-col items-center">
57-
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
58-
</div>
59-
<div className="w-12 h-10 flex flex-col items-center">
60-
<a href="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
61-
</div>
62-
<div className="w-12 h-10 flex flex-col items-center">
63-
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
64-
</div>
65-
<div className="w-12 h-10 flex flex-col items-center">
66-
<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>
67-
</div>
68-
<div className="w-12 h-10 flex flex-col items-center">
69-
<a href="https://twitter.com/fosscuk" target="twitter" ><FaTwitter className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
70-
</div>
71-
<div className="w-12 h-10 flex flex-col items-center">
72-
<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>
73-
</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} />
7468
</div>
7569
</div>
76-
<div class="lg:w-1/2 md:w-2/3 mx-auto">
77-
<form class="flex flex-wrap -m-2"
78-
// onSubmit={(e) => submit(e)}
79-
netlify>
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,4 @@ const Contact = () => {
133101
);
134102
};
135103

136-
export default Contact;
104+
export default Contact;

‎src/components/Navbar.jsx

Lines changed: 48 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -39,55 +39,49 @@ const Navbar = () => {
3939
</h1>
4040
<ul className="hidden md:flex">
4141
<li
42-
className={`p-4 ${
43-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
44-
}`}
42+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
43+
}`}
4544
>
4645
<Link to="/"> Home </Link>{" "}
4746
</li>
4847
<li
49-
className={`p-4 ${
50-
activeLink === "/about"
51-
? "text-[#0DFF1C]"
52-
: "hover:text-[#0DFF1C]"
53-
}`}
48+
className={`p-4 ${activeLink === "/about"
49+
? "text-[#0DFF1C]"
50+
: "hover:text-[#0DFF1C]"
51+
}`}
5452
>
5553
<Link to="/about">About</Link>
5654
</li>
5755
<li
58-
className={`p-4 ${
59-
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
60-
}`}
56+
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
57+
}`}
6158
>
6259
<Link to="/team"> Team </Link>{" "}
6360
</li>
6461

6562
<li
66-
className={`p-4 ${
67-
activeLink === "/resource"
68-
? "text-[#0DFF1C]"
69-
: "hover:text-[#0DFF1C]"
70-
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
63+
className={`p-4 ${activeLink === "/resource"
64+
? "text-[#0DFF1C]"
65+
: "hover:text-[#0DFF1C]"
66+
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
7167
>
7268
<a href="/resource">Resources</a>
7369
</li>
7470

7571
<li
76-
className={`p-4 ${
77-
activeLink === "/contact"
78-
? "text-[#0DFF1C]"
79-
: "hover:text-[#0DFF1C]"
80-
} hover:text-[#0DFF1C]`}
72+
className={`p-4 ${activeLink === "/contact"
73+
? "text-[#0DFF1C]"
74+
: "hover:text-[#0DFF1C]"
75+
} hover:text-[#0DFF1C]`}
8176
>
8277
<Link to="/contact">Contact</Link>
8378
</li>
8479

8580
<li
86-
className={`p-4 ${
87-
activeLink === "/shipyard"
88-
? "text-[#0DFF1C]"
89-
: "hover:text-[#0DFF1C]"
90-
} hover:text-[#0DFF1C]`}
81+
className={`p-4 ${activeLink === "/shipyard"
82+
? "text-[#0DFF1C]"
83+
: "hover:text-[#0DFF1C]"
84+
} hover:text-[#0DFF1C]`}
9185
>
9286
<Link to="/shipyard">Shipyard</Link>
9387
</li>
@@ -160,61 +154,55 @@ const Navbar = () => {
160154
</center>
161155
<ul className="uppercase p-4">
162156
<li
163-
className={`p-4 ${
164-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
165-
} border-b border-gray-600 `}
157+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
158+
} border-b border-gray-600`}
166159
>
167160
<Link to="/" onClick={() => handleLinkClick("/")}>
168-
{" "}
169-
Home{" "}
170-
</Link>{" "}
161+
Home
162+
</Link>
171163
</li>
172164
<li
173-
className={`p-4 ${
174-
activeLink === "/about"
175-
? "text-[#0DFF1C]"
176-
: "hover:text-[#0DFF1C]"
177-
} border-b border-gray-600 `}
165+
className={`p-4 ${activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
166+
} border-b border-gray-600`}
178167
>
179168
<Link to="/about">About</Link>
180169
</li>
181170
<li
182-
className={`p-4 ${
183-
activeLink === "/team"
184-
? "text-[#0DFF1C]"
185-
: "hover:text-[#0DFF1C]"
186-
} border-b border-gray-600 `}
171+
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
172+
} border-b border-gray-600`}
173+
>
174+
<Link to="/team">Team</Link>
175+
</li>
176+
<li
177+
className={`p-4 ${activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
178+
} border-b border-gray-600`}
187179
>
188-
<Link to="/team"> Team </Link>{" "}
180+
<Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
181+
Shipyard
182+
</Link>
189183
</li>
190184
<li
191-
className={`p-4 ${
192-
activeLink === "/resource"
193-
? "text-[#0DFF1C]"
194-
: "hover:text-[#0DFF1C]"
195-
} border-b border-gray-600 `}
185+
className={`p-4 ${activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
186+
} border-b border-gray-600`}
196187
>
197-
<Link to="/resource">Resources</Link>{" "}
188+
<Link to="/resource">Resources</Link>
198189
</li>
199-
<li className={`p-4 border-b border-gray-600 `}>
200-
<a href="https://docs.fosscu.org">Handbook</a>{" "}
190+
<li className="p-4 border-b border-gray-600">
191+
<a href="https://docs.fosscu.org">Handbook</a>
201192
</li>
202-
<li className={`p-4 border-b border-gray-600 `}>
193+
<li className="p-4 border-b border-gray-600">
203194
<a href="https://github.com/FOSS-Community">Projects</a>
204195
</li>
205196
<li
206-
className={`p-4 ${
207-
activeLink === "/contact"
208-
? "text-[#0DFF1C]"
209-
: "hover:text-[#0DFF1C]"
210-
} border-b border-gray-600 `}
197+
className={`p-4 ${activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
198+
} border-b border-gray-600`}
211199
>
212200
<Link to="/contact">Contact</Link>
213201
</li>
214-
<li className={`p-4 border-b border-gray-600 `}>
215-
<a href="https://lu.ma/fosscu">Calender</a>
202+
<li className="p-4 border-b border-gray-600">
203+
<a href="https://lu.ma/fosscu">Calendar</a>
216204
</li>
217-
<li className={`p-4 border-b border-gray-600 `}>
205+
<li className="p-4 border-b border-gray-600">
218206
<a href="https://github.com/FOSS-Community/">Contribute</a>
219207
</li>
220208
</ul>

0 commit comments

Comments
 (0)