Skip to content

Commit 7919169

Browse files
realstomanrealstoman
committed
Shared components refactoring
1 parent 2b572f7 commit 7919169

File tree

5 files changed

+154
-156
lines changed

5 files changed

+154
-156
lines changed

‎src/components/shared/AppBanner.vue

+24-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
1+
<script>
2+
import feather from 'feather-icons';
3+
4+
export default {
5+
name: 'Home',
6+
data: () => {
7+
return {
8+
theme: '',
9+
};
10+
},
11+
created() {
12+
this.theme = localStorage.getItem('theme') || 'light';
13+
},
14+
mounted() {
15+
feather.replace();
16+
this.theme = localStorage.getItem('theme') || 'light';
17+
},
18+
updated() {
19+
feather.replace();
20+
},
21+
methods: {},
22+
};
23+
</script>
24+
125
<template>
2-
<!-- App Banner -->
326
<section
427
class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-10"
528
>
@@ -50,28 +73,4 @@
5073
</section>
5174
</template>
5275

53-
<script>
54-
import feather from 'feather-icons';
55-
56-
export default {
57-
name: 'Home',
58-
data: () => {
59-
return {
60-
theme: '',
61-
};
62-
},
63-
created() {
64-
this.theme = localStorage.getItem('theme') || 'light';
65-
},
66-
mounted() {
67-
feather.replace();
68-
this.theme = localStorage.getItem('theme') || 'light';
69-
},
70-
updated() {
71-
feather.replace();
72-
},
73-
methods: {},
74-
};
75-
</script>
76-
7776
<style scoped></style>

‎src/components/shared/AppFooter.vue

+36-37
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,3 @@
1-
<template>
2-
<!-- App footer -->
3-
<div class="container mx-auto ">
4-
<div
5-
class="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
6-
>
7-
<!-- Footer social links -->
8-
<div
9-
class="flex flex-col justify-center items-center mb-12 sm:mb-20"
10-
>
11-
<p
12-
class="font-general-semibold text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
13-
>
14-
Follow me
15-
</p>
16-
<ul class="flex gap-4 sm:gap-8">
17-
<a
18-
v-for="social in socials"
19-
:key="social.id"
20-
:href="social.url"
21-
target="__blank"
22-
class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-500"
23-
>
24-
<i
25-
:data-feather="social.icon"
26-
class="w-5 sm:w-8 h-5 sm:h-8"
27-
></i>
28-
</a>
29-
</ul>
30-
</div>
31-
32-
<!-- Footer copyright -->
33-
<FooterCopyright />
34-
</div>
35-
</div>
36-
</template>
37-
381
<script>
392
import feather from 'feather-icons';
403
import FooterCopyright from './FooterCopyright.vue';
@@ -79,4 +42,40 @@ export default {
7942
};
8043
</script>
8144

45+
<template>
46+
<div class="container mx-auto ">
47+
<div
48+
class="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark"
49+
>
50+
<!-- Footer social links -->
51+
<div
52+
class="flex flex-col justify-center items-center mb-12 sm:mb-20"
53+
>
54+
<p
55+
class="font-general-semibold text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
56+
>
57+
Follow me
58+
</p>
59+
<ul class="flex gap-4 sm:gap-8">
60+
<a
61+
v-for="social in socials"
62+
:key="social.id"
63+
:href="social.url"
64+
target="__blank"
65+
class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-500"
66+
>
67+
<i
68+
:data-feather="social.icon"
69+
class="w-5 sm:w-8 h-5 sm:h-8"
70+
></i>
71+
</a>
72+
</ul>
73+
</div>
74+
75+
<!-- Footer copyright -->
76+
<FooterCopyright />
77+
</div>
78+
</div>
79+
</template>
80+
8281
<style scoped></style>

‎src/components/shared/AppHeader.vue

+76-76
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,79 @@
1+
<script>
2+
import ThemeSwitcher from '../ThemeSwitcher';
3+
import HireMeModal from '../HireMeModal.vue';
4+
import feather from 'feather-icons';
5+
import AppHeaderLinks from './AppHeaderLinks.vue';
6+
import Button from '../reusable/Button.vue';
7+
8+
export default {
9+
components: {
10+
ThemeSwitcher,
11+
HireMeModal,
12+
AppHeaderLinks,
13+
Button,
14+
},
15+
data() {
16+
return {
17+
isOpen: false,
18+
theme: '',
19+
modal: false,
20+
categories: [
21+
{
22+
id: 1,
23+
value: 'web',
24+
name: 'Web Application',
25+
},
26+
{
27+
id: 2,
28+
value: 'mobile',
29+
name: 'Mobile Application',
30+
},
31+
{
32+
id: 3,
33+
value: 'ui-ux',
34+
name: 'UI/UX Design',
35+
},
36+
{
37+
id: 4,
38+
value: 'branding',
39+
name: 'Branding & Anim',
40+
},
41+
],
42+
};
43+
},
44+
45+
created() {
46+
this.theme = localStorage.getItem('theme') || 'light';
47+
},
48+
mounted() {
49+
feather.replace();
50+
this.theme = localStorage.getItem('theme') || 'light';
51+
},
52+
methods: {
53+
updateTheme(theme) {
54+
this.theme = theme;
55+
},
56+
showModal() {
57+
if (this.modal) {
58+
// Stop screen scrolling
59+
document
60+
.getElementsByTagName('html')[0]
61+
.classList.remove('overflow-y-hidden');
62+
this.modal = false;
63+
} else {
64+
document
65+
.getElementsByTagName('html')[0]
66+
.classList.add('overflow-y-hidden');
67+
this.modal = true;
68+
}
69+
},
70+
},
71+
updated() {
72+
feather.replace();
73+
},
74+
};
75+
</script>
76+
177
<template>
278
<nav id="nav" class="sm:container sm:mx-auto">
379
<!-- Header start -->
@@ -96,82 +172,6 @@
96172
</nav>
97173
</template>
98174

99-
<script>
100-
import ThemeSwitcher from '../ThemeSwitcher';
101-
import HireMeModal from '../HireMeModal.vue';
102-
import feather from 'feather-icons';
103-
import AppHeaderLinks from './AppHeaderLinks.vue';
104-
import Button from '../reusable/Button.vue';
105-
106-
export default {
107-
components: {
108-
ThemeSwitcher,
109-
HireMeModal,
110-
AppHeaderLinks,
111-
Button,
112-
},
113-
data() {
114-
return {
115-
isOpen: false,
116-
theme: '',
117-
modal: false,
118-
categories: [
119-
{
120-
id: 1,
121-
value: 'web',
122-
name: 'Web Application',
123-
},
124-
{
125-
id: 2,
126-
value: 'mobile',
127-
name: 'Mobile Application',
128-
},
129-
{
130-
id: 3,
131-
value: 'ui-ux',
132-
name: 'UI/UX Design',
133-
},
134-
{
135-
id: 4,
136-
value: 'branding',
137-
name: 'Branding & Anim',
138-
},
139-
],
140-
};
141-
},
142-
143-
created() {
144-
this.theme = localStorage.getItem('theme') || 'light';
145-
},
146-
mounted() {
147-
feather.replace();
148-
this.theme = localStorage.getItem('theme') || 'light';
149-
},
150-
methods: {
151-
updateTheme(theme) {
152-
this.theme = theme;
153-
},
154-
showModal() {
155-
if (this.modal) {
156-
// Stop screen scrolling
157-
document
158-
.getElementsByTagName('html')[0]
159-
.classList.remove('overflow-y-hidden');
160-
this.modal = false;
161-
} else {
162-
document
163-
.getElementsByTagName('html')[0]
164-
.classList.add('overflow-y-hidden');
165-
this.modal = true;
166-
}
167-
},
168-
},
169-
updated() {
170-
feather.replace();
171-
},
172-
};
173-
</script>
174-
175175
<style scoped>
176176
#nav a.router-link-exact-active {
177177
@apply text-indigo-700;

‎src/components/shared/AppHeaderLinks.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script>
2+
export default {
3+
props: ['showModal', 'isOpen'],
4+
};
5+
</script>
6+
17
<template>
28
<!-- Header links -->
39
<div
@@ -36,10 +42,4 @@
3642
</div>
3743
</template>
3844

39-
<script>
40-
export default {
41-
props: ['showModal', 'isOpen'],
42-
};
43-
</script>
44-
4545
<style lang="scss" scoped></style>

‎src/components/shared/FooterCopyright.vue

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
<script>
2+
export default {
3+
data: () => {
4+
return {
5+
copyrightDate: new Date().getFullYear(),
6+
projectName: 'Vue.js & TailwindCSS Portfolio',
7+
author: 'Stoman',
8+
};
9+
},
10+
};
11+
</script>
12+
113
<template>
214
<div class="flex justify-center items-center text-center">
315
<div
@@ -22,16 +34,4 @@
2234
</div>
2335
</template>
2436

25-
<script>
26-
export default {
27-
data: () => {
28-
return {
29-
copyrightDate: new Date().getFullYear(),
30-
projectName: 'Vue.js & TailwindCSS Portfolio',
31-
author: 'Stoman',
32-
};
33-
},
34-
};
35-
</script>
36-
3737
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)