add edit icon

src/assets/main.css

@@ -25,6 +25,18 @@ body {
   flex: 1;
 }
 
+span.myinput {
+  position: relative;
+  cursor: pointer;
+}
+
+.icon-edit {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 55%;
+  right: 10px;
+}
+
 .mybtn {
   padding: 8px 15px;
   color: #fff;

src/components/icons/IconEdit.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{ size: number }>()
+</script>
+
+<template>
+  <svg
+    class="feather feather-edit"
+    fill="none"
+    :height="props.size"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    :width="props.size"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+</template>

src/views/TasksView.vue

@@ -2,6 +2,7 @@
 import { useTaskStore, type Task } from '@/stores/tasks'
 import TaskForm from '@/components/TaskForm.vue'
 import { ref } from 'vue'
+import IconEdit from '@/components/icons/IconEdit.vue'
 
 const store = useTaskStore()
 const form = ref({ show: false, id: '' })
@@ -32,7 +33,12 @@ function openForm(id: string) {
           :taskId="task.id"
           @close="form.show = false"
         />
-        <span v-else @click="openForm(task.id)" class="myinput">{{ task.title }}</span>
+        <span v-else @click="openForm(task.id)" class="myinput">
+          {{ task.title }}
+          <div class="icon-edit">
+            <IconEdit :size="16" />
+          </div>
+        </span>
         <button
           class="mybtn danger"
           v-show="!(form.show && form.id === task.id)"