no way of importing the list...

src/App.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
- import Edit from './components/Edit.vue'
+import { ref } from 'vue'
- import Item from './components/Item.vue'
+import Item  from "./components/Item.vue";
+import Edit from "./components/Edit.vue";
+
+const items = ref([{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}])
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" id="container">
-    <Item title="Hello, World!" />
+    <item v-for="item in items"
+          :title="item.title" />
   </div>
+  <edit />
 </template>
 
 <style scoped>
 .container {
-  display: flex;
+  border: 1px solid #000;
-  align-items: center;
+  padding: 10px;
-  justify-content: center;
+  width: fit-content;
-  height: 100vh;
+  margin-bottom: 20px;
 }
 </style>

src/components/Edit.vue

@@ -1,7 +1,34 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-
+  <div class="container">
+    <input type="text" v-model="s">
+    <div class="btn" @click=""><span><font-awesome-icon icon="fa-solid fa-check" /> Add</span></div>
+  </div>
 </template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin: 5px 0;
+  box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
+  background-color: #272727;
+  border-radius: 0.25rem;
+}
+
+input {
+  background-color: #242424;
+  border: 1px solid #ccc;
+  color: white;
+  font-size: 1.2rem;
+
+}
+
+input:focus {
+  outline: none;
+}
+</style>

src/components/Item.vue

@@ -7,8 +7,8 @@
   <div class="container">
     <input type="checkbox">
     <span class="title">{{ title }}</span>
-    <div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
+      <div class="btn"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
-    <div class="btn"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
+      <div class="btn"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>
   </div>
 </template>
 <style scoped>
@@ -16,29 +16,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #ccc;
-  width: fit-content;
-
   padding: 10px;
-  border-radius: 0.25rem;
+  margin: 5px 0;
-}
+  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12);
-
-.btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
   background-color: #272727;
-  box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
   border-radius: 0.25rem;
-  cursor: pointer;
-  margin: 0 10px;
-  transition: 0.3s;
-}
-
-.btn:hover {
-  background-color: #383838;
-  transition: 0.3s;
 }
 
 .title {

src/main.ts

@@ -9,10 +9,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faTrash, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faTrash, faPenToSquare, faCheck } from '@fortawesome/free-solid-svg-icons'
 
 /* add icons to the library */
-library.add(faTrash, faPenToSquare)
+library.add(faTrash, faPenToSquare, faCheck)
 
 
 createApp(App)

src/style.css

@@ -1,5 +1,23 @@
 :root {
-  background-color: #121212;
+  background-color: darkgray;
   color: white;
   font-family: "Fira Code", sans-serif;
 }
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  margin: 0 10px;
+  border: 1px solid #ccc;
+  transition: 0.3s;
+  background-color: #272727;
+}
+
+.btn:hover {
+  background-color: #383838;
+  transition: 0.3s;
+}