Cursor/change trash can color to red b286

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "aws-amplify": "^6.6.6",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@aws-amplify/backend": "^1.5.0",

src/App.vue

@@ -3,8 +3,12 @@ import Todos from './components/Todos.vue'
 </script>
 
 <template>
+  <nav>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </nav>
   <main>
-    <Todos />
+    <router-view />
   </main>
 </template>
 

src/components/About.vue

@@ -0,0 +1,11 @@
+<template>
+  <section>
+    <h1>About</h1>
+    <p>Name: Your Name</p>
+    <p>Email: [email protected]</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+// No script needed
+</script>

src/components/Todos.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import '@/assets/main.css';
 import { onMounted, ref } from 'vue';
 import type { Schema } from '../../amplify/data/resource';
 import { generateClient } from 'aws-amplify/data';
+import IconTrash from './icons/IconTrash.vue';
 
 const client = generateClient<Schema>();
 
@@ -25,6 +25,12 @@ function createTodo() {
     listTodos();
   });
 }
+
+function deleteTodo(id: string) {
+  client.models.Todo.delete({ id }).then(() => {
+    listTodos();
+  });
+}
 
 // fetch todos when the component is mounted
  onMounted(() => {
@@ -40,8 +46,13 @@ function createTodo() {
     <ul>
       <li 
         v-for="todo in todos" 
-        :key="todo.id">
-        {{ todo.content }}
+        :key="todo.id"
+        style="display: flex; align-items: center; gap: 8px;"
+      >
+        <span style="flex: 1;">{{ todo.content }}</span>
+        <button @click="deleteTodo(todo.id)" title="Delete" style="background: none; border: none; cursor: pointer; color: #d00; font-size: 1.2em;">
+          <IconTrash />
+        </button>
       </li>
     </ul>
     <div>

src/components/icons/IconTrash.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="3" y="6" width="18" height="14" rx="2" fill="#d00" fill-opacity="0.15"/>
+    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="#d00" fill="none"/>
+    <line x1="1" y1="6" x2="23" y2="6" stroke="#d00"/>
+    <line x1="10" y1="11" x2="10" y2="17" stroke="#d00"/>
+    <line x1="14" y1="11" x2="14" y2="17" stroke="#d00"/>
+  </svg>
+</template>

src/main.ts

@@ -3,7 +3,19 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import { Amplify } from "aws-amplify";
 import outputs from "../amplify_outputs.json";
+import { createRouter, createWebHistory } from 'vue-router';
+import Todos from './components/Todos.vue';
+import About from './components/About.vue';
 
 Amplify.configure(outputs);
 
-createApp(App).mount("#app");
+const routes = [
+  { path: '/', component: Todos },
+  { path: '/about', component: About }
+];
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+createApp(App).use(router).mount("#app");