Skip to content

Commit 7603246

Browse files
realstomanrealstoman
committed
Contact details added
1 parent e8940ed commit 7603246

File tree

3 files changed

+61
-23
lines changed

3 files changed

+61
-23
lines changed

‎src/components/ContactDetails.js

+38-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,43 @@
1+
import { FiPhone, FiMapPin, FiMail } from 'react-icons/fi';
2+
3+
const contacts = [
4+
{
5+
id: 1,
6+
name: 'Your Address, Your City, Your Country',
7+
icon: <FiMapPin />,
8+
},
9+
{
10+
id: 2,
11+
name: 'email@domain.com',
12+
icon: <FiMail />,
13+
},
14+
{
15+
id: 3,
16+
name: '555 8888 888',
17+
icon: <FiPhone />,
18+
},
19+
];
20+
121
const ContactDetails = () => {
222
return (
3-
<div>
4-
<h1>Contact details</h1>
23+
<div className="w-full sm:w-1/2">
24+
<div className="text-left max-w-xl px-6">
25+
<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
26+
Contact details
27+
</h2>
28+
<ul>
29+
{contacts.map((contact) => (
30+
<li className="flex " key={contact.id}>
31+
<i className="text-2xl text-gray-500 dark:text-gray-400 mr-4 mt-1">
32+
{contact.icon}
33+
</i>
34+
<span className="text-lg mb-4 text-ternary-dark dark:text-ternary-light">
35+
{contact.name}
36+
</span>
37+
</li>
38+
))}
39+
</ul>
40+
</div>
541
</div>
642
);
743
};

‎src/components/ContactForm.js

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,72 @@
11
const ContactForm = () => {
22
return (
3-
<div className="w-full sm:w-1/2">
4-
<div class="leading-loose">
5-
<form class="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left">
6-
<p class="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8">
3+
<div classNameName="w-full sm:w-1/2">
4+
<div className="leading-loose">
5+
<form className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left">
6+
<p className="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8">
77
Contact Form
88
</p>
9-
<div class="">
9+
<div className="">
1010
<label
11-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
11+
className="block text-lg text-primary-dark dark:text-primary-light mb-2"
1212
for="name"
1313
>
1414
Full Name
1515
</label>
1616
<input
17-
class="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
17+
className="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
1818
id="name"
1919
name="name"
2020
type="text"
21-
required=""
21+
required
2222
placeholder="Your Name"
2323
aria-label="Name"
2424
/>
2525
</div>
26-
<div class="mt-6">
26+
<div className="mt-6">
2727
<label
28-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
28+
className="block text-lg text-primary-dark dark:text-primary-light mb-2"
2929
for="email"
3030
>
3131
Email
3232
</label>
3333
<input
34-
class="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
34+
className="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
3535
id="email"
3636
name="email"
3737
type="text"
38-
required=""
38+
required
3939
placeholder="Your Email"
4040
aria-label="Email"
4141
/>
4242
</div>
43-
<div class="mt-6">
43+
<div className="mt-6">
4444
<label
45-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
45+
className="block text-lg text-primary-dark dark:text-primary-light mb-2"
4646
for="subject"
4747
>
4848
Subject
4949
</label>
5050
<input
51-
class="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
51+
className="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
5252
id="subject"
5353
name="subject"
5454
type="text"
55-
required=""
55+
required
5656
placeholder="Subject"
5757
aria-label="Subject"
5858
/>
5959
</div>
6060

61-
<div class="mt-6">
61+
<div className="mt-6">
6262
<label
63-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
63+
className="block text-lg text-primary-dark dark:text-primary-light mb-2"
6464
for="message"
6565
>
6666
Message
6767
</label>
6868
<textarea
69-
class="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
69+
className="w-full px-5 py-2 border-0 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
7070
id="message"
7171
name="message"
7272
cols="14"
@@ -75,9 +75,9 @@ const ContactForm = () => {
7575
></textarea>
7676
</div>
7777

78-
<div class="mt-6">
78+
<div className="mt-6">
7979
<button
80-
class="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
80+
className="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
8181
type="submit"
8282
aria-label="Send Message"
8383
>

‎src/pages/Contact.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import ContactDetails from '../components/ContactDetails';
12
import ContactForm from '../components/ContactForm';
23

34
const Contact = () => {
45
return (
56
<div className="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
67
<ContactForm />
8+
<ContactDetails />
79
</div>
810
);
911
};

0 commit comments

Comments
 (0)