dashboard changes

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@smui/common": "^7.0.0-beta.16",
+        "axios": "^1.6.7",
         "sirv-cli": "^0.4.4"
       },
       "devDependencies": {
@@ -721,6 +722,21 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
@@ -856,6 +872,17 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -888,6 +915,14 @@
       "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
       "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -924,6 +959,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
@@ -1142,6 +1209,25 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mri": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
@@ -1236,6 +1322,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/readdirp": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@smui/common": "^7.0.0-beta.16",
+    "axios": "^1.6.7",
     "sirv-cli": "^0.4.4"
   }
 }

src/APIopertaions.svelte

@@ -1,34 +1,25 @@
 <script>
   import { onMount } from 'svelte';
+  import axios from 'axios';
 
+  let pokemonData = null;
 
-    let fetchedData = [];
+  const fetchPokemonData = async () => {
-  
-    
-    async function fetchData() {
     try {
-        const response = await fetch('https://api.example.com/data'); 
+      const response = await axios.get('https://pokeapi.co/api/v2/pokemon/ditto');
-        if (!response.ok) {
+      pokemonData = response.data;
-          throw new Error('Failed to fetch data');
-        }
-        fetchedData = await response.json(); 
     } catch (error) {
-        console.error('Error fetching data:', error.message);
+      console.error('Error fetching Pokemon data:', error);
-      }
     }
+  };
 
-    onMount(fetchData);
+  onMount(fetchPokemonData);
 </script>
 
-  <div class="center-container">
+<div>
-    <div class="container">
+  {#if pokemonData}
-        <p>hi</p>
+    <h1>Index: {pokemonData.id}</h1>
-    
+  {:else}
-      <ul>
+    <p>Loading...</p>
-        {#each fetchedData as item}
+  {/if}
-          <li>{item.first} {item.last}</li>
-        {/each}
-      </ul>
 </div>
-  </div>
-  

src/App.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import ApIopertaions from "./APIopertaions.svelte";
 	import CRUDoperations from "./CRUDoperations.svelte";
+  	import Dashboard from './Dashboard.svelte';
 	
 	
 	let currentRoute = '';
@@ -60,7 +61,7 @@
 	<h1>Svelte</h1>
 	<nav>
 	  <ul>
-		
+		<li><a href="#dash">Dashboard</a></li>
 		<li><a href="#api">API Operations</a></li>
 		<li><a href="#crud">CRUD Operations</a></li>
 	  </ul>
@@ -72,8 +73,9 @@
 	<ApIopertaions />
   {:else if currentRoute === 'crud'}
 	<CRUDoperations />
+  {:else if currentRoute === 'dash'}
+	<Dashboard />
   {:else}
-	
 	<p>Page not found</p>
   {/if}
   

src/Dashboard.svelte

@@ -0,0 +1,64 @@
+<script>
+    import { onMount } from 'svelte';
+
+    let data = []; // Initialize an empty array to store the dummy data
+
+    onMount(() => {
+        // Define dummy data
+        data = [
+            { id: 1, title: 'Card 1', description: 'Description for Card 1' },
+            { id: 2, title: 'Card 2', description: 'Description for Card 2' },
+            { id: 3, title: 'Card 3', description: 'Description for Card 3' },
+            { id: 4, title: 'Card 4', description: 'Description for Card 4' },
+            { id: 5, title: 'Card 5', description: 'Description for Card 5' },
+            { id: 6, title: 'Card 6', description: 'Description for Card 6' }
+            // Add more dummy data objects as needed
+        ];
+    });
+</script>
+
+<div class="dashboard">
+    {#each data as item}
+        <div class="card">
+            <h2>{item.title}</h2>
+            <p>{item.description}</p>
+            <!-- You can add more elements here to display additional data -->
+        </div>
+    {/each}
+</div>
+
+
+<style>
+    .dashboard {
+        margin: 10px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .card {
+        width: 25%;
+        margin-bottom: 20px;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        background-color: #ffffff;
+        transition: transform 0.3s ease;
+    }
+
+    .card:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    h2 {
+        font-size: 24px;
+        margin-bottom: 10px;
+        color: #333333;
+    }
+
+    p {
+        font-size: 16px;
+        color: #666666;
+    }
+</style>