rename files

README.md

 # vue-project-poc
 
+To create a shopping cart using fake Json api
+
 This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup

src/App.vue

 
 
 <template>
-  <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
-    <div class="flex items-center flex-shrink-0 text-white mr-6">
-      <span class="font-semibold text-xl tracking-tight">Shopping Cart</span>
-    </div>
-
-    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
-      <div class="text-sm lg:flex-grow text-white ">
-        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/">
-          Home
-        </router-link>
-        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
-          About
-        </router-link>
-        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
-          Contact
-        </router-link>
-      </div>
-      <div>
-        <router-link
-          class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0" to="/cart" >Cart{{$store.state.cart.length>0? $store.state.cart.length:""}}</router-link>
-      </div>
-    </div>
-  </nav>
-
+  <Header></Header>
   <div class="content">
     <router-view class="content" />
   </div>
 </template>
 
 <script>
+import Header from '../src/components/Header/Header.vue'
 export default {
-  name:"App",
-  created(){
+  name: "App",
+  components: {
+    Header
+  },
+
+  created() {
     this.$store.dispatch('getProductsAction')
   }
 }
 </script>
 
-<style scoped>
-
-
-</style>
+<style scoped></style>

src/components/Categories/Categories.vue → src/Views/CategoriesList/CategoriesList.vue

@@ -4,26 +4,8 @@
     <div>
         <!-- Display products catelog -->
         <div class="grid grid-cols-4 gap-8">
-            <div class="card" v-for="product in products" :key="product.id">
-
-                <div class="max-w-sm rounded overflow-hidden shadow-lg">
-                    <img class="w-full card-img p-10" :src="product.image" alt="Sunset in the mountains">
-                    <div class="px-6 py-4 config">
-                        <ul class="text-gray-700 text-base">
-                            <li class="text-xl">{{ product.title }}</li>
-                            <li>Price:${{ product.price }}</li>
-                            <li> Category: {{ product.category }}</li>
-                        </ul>
-                        <router-link :to="`/categories/${product.category}/${product.id}`">
-                            <button class="bg-blue-500 my-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">More
-                                Details</button>
-                        </router-link>
-                    </div>
-
-                </div>
-
-            </div>
-
+            <!-- Rendering product card by passing prop -->
+            <ProductCard v-for="product in products" :key="product.id" :product="product"></ProductCard>
         </div>
     </div>
 </template>
@@ -31,9 +13,10 @@
 
 <script>
 
-
+import ProductCard from '../../components/ProductCard/ProductCard.vue';
 export default {
-    name: "Categories",
+    name: "CategoriesList",
+    components:{ProductCard},
     data() {
         return {
             products: [],
@@ -57,16 +40,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card {
-    min-height: 35rem;
-
-    .card-img {
-        height: 20rem;
-        width: 100%;
-    }
-
-    .config {
-        min-height: 15rem;
-    }
-}
 </style>
\ No newline at end of file

src/components/Header/Header.vue

+<template>
+ <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6 sticky top-0">
+    <div class="flex items-center flex-shrink-0 text-white mr-6">
+      <span class="font-semibold text-xl tracking-tight">Shopping Cart</span>
+    </div>
+
+    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+      <div class="text-sm lg:flex-grow text-white ">
+        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/">
+          Home
+        </router-link>
+        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/about">
+          About
+        </router-link>
+        <router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" to="/contact">
+          Contact
+        </router-link>
+      </div>
+      <div>
+        <router-link
+          class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0" to="/cart" >Cart{{$store.state.cart.length>0? $store.state.cart.length:""}}</router-link>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default{
+    name:"Header"
+}
+
+</script>
\ No newline at end of file

src/components/ProductCard/ProductCard.vue

+<template>
+    <div class="card">
+
+        <div class="max-w-sm rounded overflow-hidden shadow-lg">
+            <img class="w-full card-img p-10" :src="product.image" alt="Sunset in the mountains">
+            <div class="px-6 py-4 config">
+                <ul class="text-gray-700 text-base">
+                    <li class="text-xl">{{ product.title }}</li>
+                    <li>Price:${{ product.price }}</li>
+                    <li> Category: {{ product.category }}</li>
+                </ul>
+                <router-link :to="`/categories/${product.category}/${product.id}`">
+                    <button class="bg-blue-500 my-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">More
+                        Details</button>
+                </router-link>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ProductCard",
+    props:['product'],
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+    min-height: 35rem;
+
+    .card-img {
+        height: 20rem;
+        width: 100%;
+    }
+
+    .config {
+        min-height: 15rem;
+    }
+}
+</style>
\ No newline at end of file

src/main.js

@@ -6,11 +6,11 @@ import App from './App.vue'
 import { createRouter, createWebHistory } from 'vue-router';
 import store from './store/index.js'
 
-import Home from '../src/Views/Home/Home.Vue'
-import About from '../src/Views/About/About.vue'
-import Contact from "../src/Views/Contact/Contact.vue"
-import Categories from "../src/components/Categories/Categories.vue"
-import ProductDetail from "../src/Views/ProductDetail/ProductDetail.vue"
+import Home from '../src/views/Home/Home.Vue'
+import About from '../src/views/About/About.vue'
+import Contact from "../src/views/Contact/Contact.vue"
+import CategoriesList from "../src/views/CategoriesList/CategoriesList.vue"
+import ProductDetail from "../src/views/ProductDetail/ProductDetail.vue"
 import Cart from "../src/views/Cart/Cart.vue"
 
 
@@ -22,7 +22,7 @@ const router = createRouter({
         { name: "Home", path: '/', component: Home },
         { name: "About", path: '/about', component: About },
         { name: "Contact", path: '/contact', component: Contact },
-        { name: "Categories", path: '/categories/:product', component: Categories },
+        { name: "Categories", path: '/categories/:product', component: CategoriesList },
         { name: "ProductDetail", path: '/categories/:product/:id', component: ProductDetail },
         { name: "Cart", path: "/cart", component: Cart }