Projects components destrucutring and BPs

Author: realstoman

src/components/ProjectSingle.vue

@@ -1,9 +1,33 @@
 <template>
-	<div></div>
+	<router-link
+		to="/projects/single-project"
+		class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+		aria-label="Single Project"
+	>
+		<div>
+			<img
+				:src="project.img"
+				:alt="project.title"
+				class="rounded-t-3xl border-none"
+			/>
+		</div>
+		<div class="text-center px-4 py-6">
+			<p
+				class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+			>
+				{{ project.title }}
+			</p>
+			<span class="text-lg text-ternary-dark dark:text-ternary-light">{{
+				project.category
+			}}</span>
+		</div>
+	</router-link>
 </template>
 
 <script>
-export default {};
+export default {
+	props: ['project'],
+};
 </script>
 
 <style lang="scss" scoped></style>

src/components/Projects.vue renamed to src/components/ProjectsGrid.vue

@@ -6,42 +6,21 @@
 			<p
 				class="text-2xl sm:text-5xl font-semibold mb-3 text-ternary-dark dark:text-ternary-light"
 			>
-				Projects Portfolio
+				{{ projectsHeading }}
 			</p>
 			<p class="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
-				Some of the projects I have successfully completed
+				{{ projectsDescription }}
 			</p>
 		</div>
 		<!-- Projects grid title end -->
 
 		<!-- Projects grid start -->
 		<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
-			<router-link
+			<ProjectSingle
 				v-for="project in projects"
 				:key="project.id"
-				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
-				aria-label="Single Project"
-			>
-				<div>
-					<img
-						:src="project.img"
-						:alt="project.title"
-						class="rounded-t-3xl border-none"
-					/>
-				</div>
-				<div class="text-center px-4 py-6">
-					<p
-						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
-					>
-						{{ project.title }}
-					</p>
-					<span
-						class="text-lg text-ternary-dark dark:text-ternary-light"
-						>{{ project.category }}</span
-					>
-				</div>
-			</router-link>
+				:project="project"
+			/>
 		</div>
 		<!-- Projects grid end -->
 
@@ -61,16 +40,21 @@
 
 <script>
 import feather from 'feather-icons';
+import ProjectSingle from './ProjectSingle.vue';
 
 export default {
 	name: 'Projects',
+	components: { ProjectSingle },
 	data() {
 		return {
+			projectsHeading: 'Projects Portfolio',
+			projectsDescription:
+				'Some of the projects I have successfully completed',
 			projects: [
 				{
 					id: 1,
 					title: 'Google Health Platform',
-					category: 'Wen Application',
+					category: 'Web Application',
 					img: require('@/assets/images/web-project-2.jpg'),
 				},
 				{

src/views/Home.vue

@@ -5,32 +5,21 @@
 		<!-- Banner snd -->
 
 		<!-- Projects start -->
-		<Projects />
+		<ProjectsGrid />
 		<!-- Projects end -->
 	</div>
 </template>
 
 <script>
-import feather from 'feather-icons';
 import AppBanner from '@/components/AppBanner';
-import Projects from '../components/Projects.vue';
+import ProjectsGrid from '../components/ProjectsGrid.vue';
 
 export default {
 	name: 'Home',
 	components: {
 		AppBanner,
-		Projects,
+		ProjectsGrid,
 	},
-	data: () => {
-		return {};
-	},
-	mounted() {
-		feather.replace();
-	},
-	updated() {
-		feather.replace();
-	},
-	methods: {},
 };
 </script>
 

src/views/Projects.vue

@@ -1,30 +1,19 @@
 <template>
 	<div class="container mx-auto">
 		<!-- Projects start -->
-		<Projects />
-		<!-- Projects end -->
+		<ProjectsGrid />
+		<!-- ProjectsGrid end -->
 	</div>
 </template>
 
 <script>
-import feather from 'feather-icons';
-import Projects from '../components/Projects.vue';
+import ProjectsGrid from '../components/ProjectsGrid.vue';
 
 export default {
 	name: 'Projects',
 	components: {
-		Projects,
+		ProjectsGrid,
 	},
-	data: () => {
-		return {};
-	},
-	mounted() {
-		feather.replace();
-	},
-	updated() {
-		feather.replace();
-	},
-	methods: {},
 };
 </script>