Skip to content

Commit db2c807

Browse files
Mr-SunglassesMr-Sunglasses
authored
Merge pull request #294 from Mr-Sunglasses/fix/contact_component
fix: Broken Contacts page to Contact component
2 parents 9d34768 + ae79840 commit db2c807

File tree

3 files changed

+456
-628
lines changed

3 files changed

+456
-628
lines changed

‎src/components/Contact.jsx

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,136 @@
1-
// This is an SOS fix this component will be written in future.
1+
import React, { useState } from "react";
2+
import axios from "axios";
3+
import env from "react-dotenv";
24

3-
// Contact page in not working so this is an SOS fix for that it will be written in the future version of the website.
5+
import {
6+
FaDiscord,
7+
FaReddit,
8+
FaLinkedin,
9+
FaEnvelope,
10+
FaTwitter,
11+
FaNetworkWired
12+
} from 'react-icons/fa';
13+
14+
const Contact = () => {
15+
const url = env.url;
16+
const [data, setData] = useState({
17+
name: "",
18+
email: "",
19+
message: "",
20+
});
21+
function handle(e) {
22+
const newData = { ...data };
23+
newData[e.target.id] = e.target.value;
24+
setData(newData);
25+
console.log(newData);
26+
}
27+
function submit(e) {
28+
e.preventDefault();
29+
console.log("click");
30+
axios
31+
.post(url, {
32+
name: data.name,
33+
email: data.email,
34+
message: data.message,
35+
})
36+
.then((res) => {
37+
console.log(res.data);
38+
alert("Thanks for Equiring we will shortly contact you :)");
39+
setData({
40+
name: "",
41+
email: "",
42+
message: "",
43+
});
44+
});
45+
}
46+
return (
47+
<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">
52+
Contact Us
53+
</h1>
54+
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
55+
</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>
76+
</div>
77+
</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">
125+
Submit
126+
</button>
127+
</div>
128+
</form>
129+
</div>
130+
</div>
131+
</section>
132+
</div>
133+
);
134+
};
135+
136+
export default Contact;

‎src/pages/Contacts.jsx

Lines changed: 9 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,15 @@
1-
import React, { useState } from "react";
1+
import React from "react";
22
import Navbar from "../components/Navbar";
33
import Footer from "../components/Footer";
4-
import axios from "axios";
5-
import env from "react-dotenv";
6-
7-
import {
8-
FaDiscord,
9-
FaReddit,
10-
FaLinkedin,
11-
FaEnvelope,
12-
FaTwitter,
13-
FaNetworkWired
14-
} from 'react-icons/fa';
15-
4+
import Contact from "../components/Contact";
165
const Contacts = () => {
17-
const url = env.url;
18-
const [data, setData] = useState({
19-
name: "",
20-
email: "",
21-
message: "",
22-
});
23-
function handle(e) {
24-
const newData = { ...data };
25-
newData[e.target.id] = e.target.value;
26-
setData(newData);
27-
console.log(newData);
28-
}
29-
function submit(e) {
30-
e.preventDefault();
31-
console.log("click");
32-
axios
33-
.post(url, {
34-
name: data.name,
35-
email: data.email,
36-
message: data.message,
37-
})
38-
.then((res) => {
39-
console.log(res.data);
40-
alert("Thanks for Equiring we will shortly contact you :)");
41-
setData({
42-
name: "",
43-
email: "",
44-
message: "",
45-
});
46-
});
47-
}
48-
return (
49-
<div>
50-
<Navbar />
51-
<section class="text-gray-400 bg-gray-1000 body-font ">
52-
<div class="container px-5 py-24 mx-auto">
53-
<div class="flex flex-col text-center w-full mb-12">
54-
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
55-
Contact Us
56-
</h1>
57-
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
58-
</div>
59-
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
60-
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
61-
<div className="w-12 h-10 flex flex-col items-center">
62-
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord 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="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
66-
</div>
67-
<div className="w-12 h-10 flex flex-col items-center">
68-
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className= " hover: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://www.linkedin.com/company/fosscu/" target="linkedin" ><FaLinkedin 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://twitter.com/fosscuk" target="twitter" ><FaTwitter className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
75-
</div>
76-
<div className="w-12 h-10 flex flex-col items-center">
77-
<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>
78-
</div>
79-
</div>
80-
</div>
81-
<div class="lg:w-1/2 md:w-2/3 mx-auto">
82-
<form class="flex flex-wrap -m-2" onSubmit={(e) => submit(e)}>
83-
<div class="p-2 w-1/2">
84-
<div class="">
85-
<label for="name" class="leading-7 text-sm text-gray-400">
86-
Name
87-
</label>
88-
<input
89-
type="text"
90-
id="name"
91-
onChange={(e) => handle(e)}
92-
value={data.name}
93-
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"
94-
/>
95-
</div>
96-
</div>
97-
<div class="p-2 w-1/2">
98-
<div class="">
99-
<label for="email" class="leading-7 text-sm text-gray-400">
100-
Email
101-
</label>
102-
<input
103-
type="email"
104-
id="email"
105-
name="email"
106-
onChange={(e) => handle(e)}
107-
value={data.email}
108-
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"
109-
/>
110-
</div>
111-
</div>
112-
<div class="p-2 w-full">
113-
<div class="">
114-
<label for="message" class="leading-7 text-sm text-gray-400">
115-
Message
116-
</label>
117-
<textarea
118-
id="message"
119-
name="message"
120-
onChange={(e) => handle(e)}
121-
value={data.message}
122-
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"
123-
></textarea>
124-
</div>
125-
</div>
126-
<div class="p-2 w-full">
127-
<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">
128-
Submit
129-
</button>
130-
</div>
131-
</form>
132-
</div>
6+
return (
7+
<div>
8+
<Navbar />
9+
<Contact />
10+
<Footer />
13311
</div>
134-
</section>
135-
<Footer />
136-
</div>
137-
);
12+
);
13813
};
13914

140-
export default Contacts;
15+
export default Contacts;

0 commit comments

Comments
 (0)