Single project related projects BPs and dynamic

Author: realstoman

src/components/ProjectSingleRelatedProjects.vue

@@ -6,36 +6,18 @@
 		<p
 			class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14 text-left"
 		>
-			Related Projects
+			{{ relatedProjectsHeading }}
 		</p>
 
 		<div class="grid grid-cols-1 sm:grid-cols-4 gap-10">
-			<div>
+			<div
+				v-for="relatedProject in relatedProjects"
+				:key="relatedProject"
+			>
 				<img
-					src="@/assets/images/mobile-project-1.jpg"
+					:src="relatedProject.img"
 					class="rounded-2xl cursor-pointer"
-					alt="Related Project"
-				/>
-			</div>
-			<div>
-				<img
-					src="@/assets/images/web-project-1.jpg"
-					class="rounded-2xl cursor-pointer"
-					alt="Related Project"
-				/>
-			</div>
-			<div>
-				<img
-					src="@/assets/images/ui-project-2.jpg"
-					class="rounded-2xl cursor-pointer"
-					alt="Related Project"
-				/>
-			</div>
-			<div>
-				<img
-					src="@/assets/images/mobile-project-1.jpg"
-					class="rounded-2xl cursor-pointer"
-					alt="Related Project"
+					:alt="relatedProject.title"
 				/>
 			</div>
 		</div>
@@ -45,6 +27,32 @@
 
 <script>
 export default {
-	setup() {},
+	data: () => {
+		return {
+			relatedProjectsHeading: 'Related Projects',
+			relatedProjects: [
+				{
+					id: 1,
+					title: 'Mobile UI',
+					img: require('@/assets/images/mobile-project-1.jpg'),
+				},
+				{
+					id: 2,
+					title: 'Web Application',
+					img: require('@/assets/images/web-project-1.jpg'),
+				},
+				{
+					id: 3,
+					title: 'UI Design',
+					img: require('@/assets/images/ui-project-2.jpg'),
+				},
+				{
+					id: 4,
+					title: 'Kabul Mobile App UI',
+					img: require('@/assets/images/mobile-project-2.jpg'),
+				},
+			],
+		};
+	},
 };
 </script>