Skip to content

Commit f5bd7aa

Browse files
realstomanrealstoman
committed
Contact form and contact details components BPs
1 parent d7d6f94 commit f5bd7aa

File tree

3 files changed

+142
-121
lines changed

3 files changed

+142
-121
lines changed

‎src/components/ContactDetails.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="w-full sm:w-1/2">
3+
<div class="text-left max-w-xl px-6">
4+
<h2
5+
class="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8"
6+
>
7+
Contact details
8+
</h2>
9+
<ul class="">
10+
<li class="flex" v-for="contact in contacts" :key="contact.id">
11+
<i
12+
:data-feather="contact.icon"
13+
class="w-5 text-gray-500 dark:text-gray-400 mr-4"
14+
></i>
15+
<a
16+
href="#"
17+
class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
18+
:class="
19+
contact.icon === 'mail' || contact.icon === 'phone'
20+
? 'hover:underline cursor-pointer'
21+
: ''
22+
"
23+
aria-label="Website and Phone"
24+
>
25+
{{ contact.name }}
26+
</a>
27+
</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
props: ['contacts'],
36+
};
37+
</script>
38+
39+
<style lang="scss" scoped></style>

‎src/components/ContactForm.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="w-full sm:w-1/2">
3+
<div class="leading-loose">
4+
<form
5+
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+
>
7+
<p
8+
class="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8"
9+
>
10+
Contact Form
11+
</p>
12+
<div class="">
13+
<label
14+
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
15+
for="name"
16+
>Full Name</label
17+
>
18+
<input
19+
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"
20+
id="name"
21+
name="name"
22+
type="text"
23+
required=""
24+
placeholder="Your Name"
25+
aria-label="Name"
26+
/>
27+
</div>
28+
<div class="mt-6">
29+
<label
30+
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
31+
for="email"
32+
>Email</label
33+
>
34+
<input
35+
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"
36+
id="email"
37+
name="email"
38+
type="text"
39+
required=""
40+
placeholder="Your Email"
41+
aria-label="Email"
42+
/>
43+
</div>
44+
<div class="mt-6">
45+
<label
46+
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
47+
for="subject"
48+
>Subject</label
49+
>
50+
<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"
52+
id="subject"
53+
name="subject"
54+
type="text"
55+
required=""
56+
placeholder="Subject"
57+
aria-label="Subject"
58+
/>
59+
</div>
60+
61+
<div class="mt-6">
62+
<label
63+
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
64+
for="message"
65+
>Message</label
66+
>
67+
<textarea
68+
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+
id="message"
70+
name="message"
71+
cols="14"
72+
rows="6"
73+
aria-label="Message"
74+
></textarea>
75+
</div>
76+
77+
<div class="mt-6">
78+
<button
79+
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+
type="submit"
81+
aria-label="Send Message"
82+
>
83+
Send Message
84+
</button>
85+
</div>
86+
</form>
87+
</div>
88+
</div>
89+
</template>
90+
91+
<script>
92+
export default {};
93+
</script>
94+
95+
<style lang="scss" scoped></style>

‎src/views/Contact.vue‎

Lines changed: 8 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,25 @@
11
<template>
22
<div class="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
33
<!-- Contact form start -->
4-
<div class="w-full sm:w-1/2">
5-
<div class="leading-loose">
6-
<form
7-
class="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
8-
>
9-
<p
10-
class="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8"
11-
>
12-
Contact Form
13-
</p>
14-
<div class="">
15-
<label
16-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
17-
for="name"
18-
>Full Name</label
19-
>
20-
<input
21-
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"
22-
id="name"
23-
name="name"
24-
type="text"
25-
required=""
26-
placeholder="Your Name"
27-
aria-label="Name"
28-
/>
29-
</div>
30-
<div class="mt-6">
31-
<label
32-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
33-
for="email"
34-
>Email</label
35-
>
36-
<input
37-
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"
38-
id="email"
39-
name="email"
40-
type="text"
41-
required=""
42-
placeholder="Your Email"
43-
aria-label="Email"
44-
/>
45-
</div>
46-
<div class="mt-6">
47-
<label
48-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
49-
for="subject"
50-
>Subject</label
51-
>
52-
<input
53-
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"
54-
id="subject"
55-
name="subject"
56-
type="text"
57-
required=""
58-
placeholder="Subject"
59-
aria-label="Subject"
60-
/>
61-
</div>
62-
63-
<div class="mt-6">
64-
<label
65-
class="block text-lg text-primary-dark dark:text-primary-light mb-2"
66-
for="message"
67-
>Message</label
68-
>
69-
<textarea
70-
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"
71-
id="message"
72-
name="message"
73-
cols="14"
74-
rows="6"
75-
aria-label="Message"
76-
></textarea>
77-
</div>
78-
79-
<div class="mt-6">
80-
<button
81-
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"
82-
type="submit"
83-
aria-label="Send Message"
84-
>
85-
Send Message
86-
</button>
87-
</div>
88-
</form>
89-
</div>
90-
</div>
4+
<ContactForm />
915
<!-- Contact form end -->
926

937
<!-- Contact details start -->
94-
<div class="w-full sm:w-1/2">
95-
<div class="text-left max-w-xl px-6">
96-
<h2
97-
class="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8"
98-
>
99-
Contact details
100-
</h2>
101-
<ul class="">
102-
<li
103-
class="flex"
104-
v-for="contact in contacts"
105-
:key="contact.id"
106-
>
107-
<i
108-
:data-feather="contact.icon"
109-
class="w-5 text-gray-500 dark:text-gray-400 mr-4"
110-
></i>
111-
<a
112-
href="#"
113-
class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
114-
:class="
115-
contact.icon === 'mail' ||
116-
contact.icon === 'phone'
117-
? 'hover:underline cursor-pointer'
118-
: ''
119-
"
120-
aria-label="Website and Phone"
121-
>
122-
{{ contact.name }}
123-
</a>
124-
</li>
125-
</ul>
126-
</div>
127-
</div>
8+
<ContactDetails :contacts="contacts" />
1289
<!-- Contact details end -->
12910
</div>
13011
</template>
13112

13213
<script>
13314
import feather from 'feather-icons';
15+
import ContactForm from '@/components/ContactForm.vue';
16+
import ContactDetails from '@/components/ContactDetails.vue';
13417
13518
export default {
19+
components: {
20+
ContactForm,
21+
ContactDetails,
22+
},
13623
data: () => {
13724
return {
13825
contacts: [

0 commit comments

Comments
 (0)