Skip to content

Commit 0f6b28b

Browse files
realstomanrealstoman
committed
Single project dynamic contents coming as props
1 parent 6dd2496 commit 0f6b28b

File tree

5 files changed

+178
-177
lines changed

5 files changed

+178
-177
lines changed

‎src/components/ProjectSingleGallery.vue

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,6 @@
1818

1919
<script>
2020
export default {
21-
data() {
22-
return {
23-
projectImages: [
24-
{
25-
id: 1,
26-
title: 'Kabul Project Management UI',
27-
img: require('@/assets/images/ui-project-1.jpg'),
28-
},
29-
{
30-
id: 2,
31-
title: 'Kabul Project Management UI',
32-
img: require('@/assets/images/web-project-2.jpg'),
33-
},
34-
{
35-
id: 3,
36-
title: 'Kabul Project Management UI',
37-
img: require('@/assets/images/mobile-project-2.jpg'),
38-
},
39-
],
40-
};
41-
},
21+
props: ['projectImages'],
4222
};
4323
</script>

‎src/components/ProjectSingleHeader.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<p
55
class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-7 sm:mt-20 mb-7"
66
>
7-
Kabul Project Management UI
7+
{{ singleProjectHeader.singleProjectTitle }}
88
</p>
99
<div class="flex">
1010
<div class="flex items-center mr-10">
@@ -14,7 +14,7 @@
1414
></i>
1515
<span
1616
class="ml-2 leading-none text-primary-dark dark:text-primary-light"
17-
>Jul 26, 2021</span
17+
>{{ singleProjectHeader.singleProjectDate }}</span
1818
>
1919
</div>
2020
<div class="flex items-center">
@@ -24,7 +24,7 @@
2424
></i>
2525
<span
2626
class="ml-2 leading-none text-primary-dark dark:text-primary-light"
27-
>UI / Frontend</span
27+
>{{ singleProjectHeader.singleProjectTag }}</span
2828
>
2929
</div>
3030
</div>
@@ -34,6 +34,6 @@
3434

3535
<script>
3636
export default {
37-
setup() {},
37+
props: ['singleProjectHeader'],
3838
};
3939
</script>

‎src/components/ProjectSingleInfo.vue

Lines changed: 12 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
<p
99
class="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
1010
>
11-
About Client
11+
{{ projectInfo.clientHeading }}
1212
</p>
1313
<ul class="leading-loose">
1414
<li
15-
v-for="info in companyInfos"
15+
v-for="info in projectInfo.companyInfos"
1616
:key="info"
1717
class="text-ternary-dark dark:text-ternary-light"
1818
>
@@ -37,13 +37,10 @@
3737
<p
3838
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
3939
>
40-
Objective
40+
{{ projectInfo.objectivesHeading }}
4141
</p>
4242
<p class="text-primary-dark dark:text-ternary-light">
43-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
44-
Optio, natus! Quibusdam enim quod in esse, mollitia
45-
molestias incidunt quas ipsa accusamus veniam, quis odit
46-
cumque vero voluptate, reiciendis amet non!
43+
{{ projectInfo.objectivesDetails }}
4744
</p>
4845
</div>
4946
<!-- Single project objectives end -->
@@ -53,10 +50,10 @@
5350
<p
5451
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
5552
>
56-
{{ technlogies[0].title }}
53+
{{ projectInfo.technlogies[0].title }}
5754
</p>
5855
<p class="text-primary-dark dark:text-ternary-light">
59-
{{ technlogies[0].techs.join(', ') }}
56+
{{ projectInfo.technlogies[0].techs.join(', ') }}
6057
</p>
6158
</div>
6259
<!-- Single project technologies end -->
@@ -66,11 +63,11 @@
6663
<p
6764
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
6865
>
69-
Share This
66+
{{ projectInfo.socialSharingsHeading }}
7067
</p>
7168
<div class="flex items-center gap-3 mt-5">
7269
<a
73-
v-for="social in socialSharings"
70+
v-for="social in projectInfo.socialSharings"
7471
:key="social.id"
7572
:href="social.url"
7673
target="__blank"
@@ -89,10 +86,10 @@
8986
<p
9087
class="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7"
9188
>
92-
Challenge
89+
{{ projectInfo.projectDetailsHeading }}
9390
</p>
9491
<p
95-
v-for="projectDetail in projectDetails"
92+
v-for="projectDetail in projectInfo.projectDetails"
9693
:key="projectDetail.id"
9794
class="mb-5 text-lg text-ternary-dark dark:text-ternary-light"
9895
>
@@ -108,109 +105,11 @@
108105
import feather from 'feather-icons';
109106
110107
export default {
111-
data() {
112-
return {
113-
companyInfos: [
114-
{
115-
id: 1,
116-
title: 'Name',
117-
details: 'Company Ltd',
118-
},
119-
{
120-
id: 2,
121-
title: 'Services',
122-
details: 'UI Design & Frontend Development',
123-
},
124-
{
125-
id: 3,
126-
title: 'Website',
127-
details: 'https://company.com',
128-
},
129-
{
130-
id: 4,
131-
title: 'Phone',
132-
details: '555 8888 888',
133-
},
134-
],
135-
technlogies: [
136-
{
137-
title: 'Tools & Technologies',
138-
techs: [
139-
'HTML',
140-
'CSS',
141-
'JavaScript',
142-
'Vue.js',
143-
'TailwindCSS',
144-
'AdobeXD',
145-
],
146-
},
147-
],
148-
projectDetails: [
149-
{
150-
id: 1,
151-
details:
152-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
153-
},
154-
{
155-
id: 2,
156-
details:
157-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
158-
},
159-
{
160-
id: 3,
161-
details:
162-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
163-
},
164-
{
165-
id: 4,
166-
details:
167-
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
168-
},
169-
],
170-
socialSharings: [
171-
{
172-
id: 1,
173-
name: 'Twitter',
174-
icon: 'twitter',
175-
url: 'https://twitter.com/NangialaiStoman',
176-
},
177-
{
178-
id: 2,
179-
name: 'Instagram',
180-
icon: 'instagram',
181-
url: 'https://instagram.com/NangialaiStoman',
182-
},
183-
{
184-
id: 3,
185-
name: 'Facebook',
186-
icon: 'facebook',
187-
url: 'https://facebook.com/',
188-
},
189-
{
190-
id: 4,
191-
name: 'LinkedIn',
192-
icon: 'linkedin',
193-
url: 'https://linkedin.com/',
194-
},
195-
{
196-
id: 5,
197-
name: 'Youtube',
198-
icon: 'youtube',
199-
url: 'https://www.youtube.com/c/StomanStudio',
200-
},
201-
{
202-
id: 5,
203-
name: 'Dribbble',
204-
icon: 'dribbble',
205-
url: 'https://www.dribbble.com/',
206-
},
207-
],
208-
};
209-
},
108+
props: ['projectInfo'],
109+
210110
mounted() {
211111
feather.replace();
212112
},
213-
methods: {},
214113
updated() {
215114
feather.replace();
216115
},

‎src/components/ProjectSingleRelatedProjects.vue

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,15 @@
66
<p
77
class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left"
88
>
9-
{{ relatedProjectsHeading }}
9+
{{ relatedProject.relatedProjectsHeading }}
1010
</p>
1111

1212
<div class="grid grid-cols-1 sm:grid-cols-4 gap-10">
13-
<div
14-
v-for="relatedProject in relatedProjects"
15-
:key="relatedProject"
16-
>
13+
<div v-for="item in relatedProject.relatedProjects" :key="item.id">
1714
<img
18-
:src="relatedProject.img"
15+
:src="item.img"
1916
class="rounded-2xl cursor-pointer"
20-
:alt="relatedProject.title"
17+
:alt="item.title"
2118
/>
2219
</div>
2320
</div>
@@ -27,32 +24,6 @@
2724

2825
<script>
2926
export default {
30-
data: () => {
31-
return {
32-
relatedProjectsHeading: 'Related Projects',
33-
relatedProjects: [
34-
{
35-
id: 1,
36-
title: 'Mobile UI',
37-
img: require('@/assets/images/mobile-project-1.jpg'),
38-
},
39-
{
40-
id: 2,
41-
title: 'Web Application',
42-
img: require('@/assets/images/web-project-1.jpg'),
43-
},
44-
{
45-
id: 3,
46-
title: 'UI Design',
47-
img: require('@/assets/images/ui-project-2.jpg'),
48-
},
49-
{
50-
id: 4,
51-
title: 'Kabul Mobile App UI',
52-
img: require('@/assets/images/mobile-project-2.jpg'),
53-
},
54-
],
55-
};
56-
},
27+
props: ['relatedProject'],
5728
};
5829
</script>

0 commit comments

Comments
 (0)