added store state for json

src/assets/index.js

@@ -1 +1 @@
-export {default as gymTrackerLogo} from './gymTrackerLogo.png';
+export {default as gymTrackerLogo} from './gymTrackerLogo.png';

src/assets/muscleExercise.js

@@ -1,5 +1,4 @@
-{
-    "muscle": [
+    "muscle" [
         { 
             "name": "Legs",
             "exercises":
@@ -761,4 +760,4 @@
             ]
         }
     ]
-}
+export default muscleExercise;

src/components/NavigationModel.vue

@@ -10,7 +10,7 @@
             <router-link to="/Muscles/Chest" class="nav-item nav-link">Chest</router-link>
             <router-link to="/Muscles/Shoulder" class="nav-item nav-link">Shoulder</router-link>
             <router-link to="/Muscles/Triceps" class="nav-item nav-link">Triceps</router-link>
-            <router-link to="/Muscles/Bicepts" class="nav-item nav-link">Bicepts</router-link>
+            <router-link to="/Muscles/Biceps" class="nav-item nav-link">Biceps</router-link>
         </div>
     </nav>
 </template>
@@ -45,7 +45,7 @@
     width: 20%;
 }
 .logo img {
-    width: 30%;
+    width: 20%;
     height: 100%;
     margin-left: 1rem;
 }

src/stores/post.js

@@ -0,0 +1,24 @@
+import {defineStore} from 'pinia'
+import muscleExercise from '../assets/muscleExercise';
+import { ref } from 'vue'
+
+export const usePostStore = defineStore('post', () => {
+    const postList = ref([])
+    const currentPost = ref(null)
+    const error = ref(null)
+   
+    async function fetchMuscleExercise() {
+        postList.value = muscleExercise
+        error.value = []
+    }
+
+    return {
+        postList, 
+        currentPost, 
+        error, 
+        fetchMuscleExercise
+    }
+    }   
+)
+
+export default usePostStore

src/views/muscles/Legs.vue

@@ -1,24 +1,26 @@
 <template>
     <div class="legs">
       <h1>Legs</h1>
-      <h2>Search</h2>
+      <div v-for="post in post.postList">
+        <h2>{{post.exercise}}</h2>
+        <p>{{post.body}}</p>
+      </div>
     </div>
   </template>
 
 <script setup>
+  import { usePostStore } from '@/stores/post.js'
+  import { onMounted } from 'vue';
 
-  </script>
+  const post = usePostStore()
+
+  onMounted(() => {
+       post.fetchMuscleExercise()
+     }
+     )
+
+</script>
   
-  <style>
-  /* @media (min-width: 1024px) {
-    .about {
-      min-height: 100vh;
-      display: flex;
-      align-items: right;
-    }
-  } */
-  .legs {
-    
-  }
-  </style>
+<style>
+</style>