Skip to content

Commit 38c1515

Browse files
realstomanrealstoman
committed
Creare hire me modal and pass in related props
1 parent 9fb5faa commit 38c1515

File tree

2 files changed

+181
-159
lines changed

2 files changed

+181
-159
lines changed

‎src/components/AppHeader.vue‎

Lines changed: 9 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -130,136 +130,25 @@
130130
<!-- Header end -->
131131

132132
<!-- Hire me modal start -->
133-
<transition name="fade">
134-
<div v-show="modal" class="fixed inset-0 z-30">
135-
<!-- background -->
136-
<div
137-
v-show="modal"
138-
@click="showModal()"
139-
class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
140-
></div>
141-
<!-- -->
142-
<main
143-
class="flex flex-col items-center justify-center h-full w-full"
144-
>
145-
<transition name="fade-up-down">
146-
<div
147-
v-show="modal"
148-
class="modal-wrapper flex items-center z-30"
149-
>
150-
<div
151-
class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative"
152-
>
153-
<div
154-
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
155-
>
156-
<h5
157-
class=" text-primary-dark dark:text-primary-light text-2xl"
158-
>
159-
What project are you looking for?
160-
</h5>
161-
<button
162-
class="px-4 font-bold text-primary-dark dark:text-primary-light"
163-
@click="showModal()"
164-
>
165-
X
166-
</button>
167-
</div>
168-
<div
169-
class="modal-body p-5 w-full h-full overflow-y-auto "
170-
>
171-
<form class="max-w-xl m-4 text-left">
172-
<div class="">
173-
<input
174-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
175-
id="name"
176-
name="name"
177-
type="text"
178-
required=""
179-
placeholder="Name"
180-
aria-label="Name"
181-
/>
182-
</div>
183-
<div class="mt-6">
184-
<input
185-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
186-
id="email"
187-
name="email"
188-
type="text"
189-
required=""
190-
placeholder="Email"
191-
aria-label="Email"
192-
/>
193-
</div>
194-
<div class="mt-6">
195-
<select
196-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
197-
id="subject"
198-
name="subject"
199-
type="text"
200-
required=""
201-
aria-label="Project Category"
202-
>
203-
<option
204-
v-for="category in categories"
205-
:key="category.id"
206-
:value="category.value"
207-
>{{ category.name }}</option
208-
>
209-
</select>
210-
</div>
211-
212-
<div class="mt-6">
213-
<textarea
214-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
215-
id="message"
216-
name="message"
217-
cols="14"
218-
rows="6"
219-
aria-label="Details"
220-
placeholder="Project description"
221-
></textarea>
222-
</div>
223-
224-
<div class="mt-6">
225-
<button
226-
class="px-6 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-1 focus:ring-indigo-900"
227-
type="submit"
228-
aria-label="Submit Request"
229-
>
230-
Send Request
231-
</button>
232-
</div>
233-
</form>
234-
</div>
235-
<div
236-
class="modal-footer py-3 px-5 border0-t text-right"
237-
>
238-
<button
239-
class="px-6 py-2 bg-indigo-400 hover:bg-indigo-500 rounded-lg font-bold text-primary-light focus:ring-1 focus:ring-indigo-900"
240-
@click="showModal()"
241-
aria-label="Close Modal"
242-
>
243-
Close
244-
</button>
245-
</div>
246-
</div>
247-
</div>
248-
</transition>
249-
</main>
250-
</div>
251-
</transition>
133+
<HireMeModal
134+
:showModal="showModal"
135+
:modal="modal"
136+
:categories="categories"
137+
aria-modal="Hire Me Modal"
138+
/>
252139
<!-- Hire me modal end -->
253140
</nav>
254141
</template>
255142

256143
<script>
257-
import ThemeSwitcher from '@/components/ThemeSwitcher';
144+
import ThemeSwitcher from './ThemeSwitcher';
145+
import HireMeModal from './HireMeModal.vue';
258146
import feather from 'feather-icons';
259147
260148
export default {
261149
components: {
262150
ThemeSwitcher,
151+
HireMeModal,
263152
},
264153
data() {
265154
return {
@@ -329,43 +218,4 @@ export default {
329218
@apply dark:text-indigo-400;
330219
@apply font-medium;
331220
}
332-
333-
.modal-body {
334-
max-height: 500px;
335-
}
336-
.bg-gray-800-opacity {
337-
background-color: #2d374850;
338-
}
339-
@media screen and (max-width: 768px) {
340-
.modal-body {
341-
max-height: 400px;
342-
}
343-
}
344-
.fade-up-down-enter-active {
345-
transition: all 0.3s ease;
346-
}
347-
.fade-up-down-leave-active {
348-
transition: all 0.3s ease;
349-
}
350-
.fade-up-down-enter {
351-
transform: translateY(10%);
352-
opacity: 0;
353-
}
354-
.fade-up-down-leave-to {
355-
transform: translateY(10%);
356-
opacity: 0;
357-
}
358-
359-
.fade-enter-active {
360-
-webkit-transition: opacity 2s;
361-
transition: opacity 0.3s;
362-
}
363-
.fade-leave-active {
364-
transition: opacity 0.3s;
365-
}
366-
367-
.fade-enter,
368-
.fade-leave-to {
369-
opacity: 0;
370-
}
371221
</style>

‎src/components/HireMeModal.vue‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<template>
2+
<transition name="fade">
3+
<div v-show="modal" class="fixed inset-0 z-30">
4+
<!-- background -->
5+
<div
6+
v-show="modal"
7+
@click="showModal()"
8+
class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
9+
></div>
10+
<!-- -->
11+
<main
12+
class="flex flex-col items-center justify-center h-full w-full"
13+
>
14+
<transition name="fade-up-down">
15+
<div
16+
v-show="modal"
17+
class="modal-wrapper flex items-center z-30"
18+
>
19+
<div
20+
class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative"
21+
>
22+
<div
23+
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
24+
>
25+
<h5
26+
class=" text-primary-dark dark:text-primary-light text-2xl"
27+
>
28+
What project are you looking for?
29+
</h5>
30+
<button
31+
class="px-4 font-bold text-primary-dark dark:text-primary-light"
32+
@click="showModal()"
33+
>
34+
X
35+
</button>
36+
</div>
37+
<div
38+
class="modal-body p-5 w-full h-full overflow-y-auto "
39+
>
40+
<form class="max-w-xl m-4 text-left">
41+
<div class="">
42+
<input
43+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
44+
id="name"
45+
name="name"
46+
type="text"
47+
required=""
48+
placeholder="Name"
49+
aria-label="Name"
50+
/>
51+
</div>
52+
<div class="mt-6">
53+
<input
54+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
55+
id="email"
56+
name="email"
57+
type="text"
58+
required=""
59+
placeholder="Email"
60+
aria-label="Email"
61+
/>
62+
</div>
63+
<div class="mt-6">
64+
<select
65+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
66+
id="subject"
67+
name="subject"
68+
type="text"
69+
required=""
70+
aria-label="Project Category"
71+
>
72+
<option
73+
v-for="category in categories"
74+
:key="category.id"
75+
:value="category.value"
76+
>{{ category.name }}</option
77+
>
78+
</select>
79+
</div>
80+
81+
<div class="mt-6">
82+
<textarea
83+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
84+
id="message"
85+
name="message"
86+
cols="14"
87+
rows="6"
88+
aria-label="Details"
89+
placeholder="Project description"
90+
></textarea>
91+
</div>
92+
93+
<div class="mt-6">
94+
<button
95+
class="px-6 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-1 focus:ring-indigo-900"
96+
type="submit"
97+
aria-label="Submit Request"
98+
>
99+
Send Request
100+
</button>
101+
</div>
102+
</form>
103+
</div>
104+
<div
105+
class="modal-footer py-3 px-5 border0-t text-right"
106+
>
107+
<button
108+
class="px-6 py-2 bg-indigo-400 hover:bg-indigo-500 rounded-lg font-bold text-primary-light focus:ring-1 focus:ring-indigo-900"
109+
@click="showModal()"
110+
aria-label="Close Modal"
111+
>
112+
Close
113+
</button>
114+
</div>
115+
</div>
116+
</div>
117+
</transition>
118+
</main>
119+
</div>
120+
</transition>
121+
</template>
122+
123+
<script>
124+
export default {
125+
props: ['showModal', 'modal', 'categories'],
126+
data() {
127+
return {};
128+
},
129+
methods: {},
130+
};
131+
</script>
132+
133+
<style scoped>
134+
.modal-body {
135+
max-height: 500px;
136+
}
137+
.bg-gray-800-opacity {
138+
background-color: #2d374850;
139+
}
140+
@media screen and (max-width: 768px) {
141+
.modal-body {
142+
max-height: 400px;
143+
}
144+
}
145+
.fade-up-down-enter-active {
146+
transition: all 0.3s ease;
147+
}
148+
.fade-up-down-leave-active {
149+
transition: all 0.3s ease;
150+
}
151+
.fade-up-down-enter {
152+
transform: translateY(10%);
153+
opacity: 0;
154+
}
155+
.fade-up-down-leave-to {
156+
transform: translateY(10%);
157+
opacity: 0;
158+
}
159+
160+
.fade-enter-active {
161+
-webkit-transition: opacity 2s;
162+
transition: opacity 0.3s;
163+
}
164+
.fade-leave-active {
165+
transition: opacity 0.3s;
166+
}
167+
168+
.fade-enter,
169+
.fade-leave-to {
170+
opacity: 0;
171+
}
172+
</style>

0 commit comments

Comments
 (0)