wip: list items

src/components/ItemColumn/ItemColumn.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col gap-2 border-2 rounded p-2">
+    <h1 class="font-bold">Title</h1>
+
+    <div class="w-full max-h-100 overflow-y-auto">
+      <ul>
+        <li v-for="i in 100" :key="i">thing</li>
+      </ul>
+    </div>
+    <form class="flex w-full sm:w-auto min-w-0 gap-2" @submit.prevent="addItem">
+      <input
+        v-model="newItem"
+        type="text"
+        placeholder="Add an item..."
+        class="flex-1 min-w-0 border rounded-md px-2 py-1"
+      />
+      <button type="submit" class="px-3 py-1 border rounded-md">Add</button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/components/SpendColumns/SpendColumns.vue

@@ -1 +1,12 @@
-<template>Spend Columns</template>
+<script setup lang="ts">
+import ItemColumn from '../ItemColumn/ItemColumn.vue'
+</script>
+
+<template>
+  <div class="flex flex-col sm:flex-row items-start justify-around gap-4 my-4">
+    <ItemColumn id="revenue"></ItemColumn>
+    <ItemColumn id="investments"></ItemColumn>
+    <ItemColumn id="mandatory"></ItemColumn>
+    <ItemColumn id="personal"></ItemColumn>
+  </div>
+</template>

src/components/SpendInput/SpendInput.vue

@@ -1 +0,0 @@
-<template>Spend Input</template>

src/pages/DashboardPage.vue

@@ -2,7 +2,6 @@
 import Navbar from '@/components/Navbar/Navbar.vue'
 import RemainingAmount from '@/components/RemainingAmount/RemainingAmount.vue'
 import SpendColumns from '@/components/SpendColumns/SpendColumns.vue'
-import SpendInput from '@/components/SpendInput/SpendInput.vue'
 </script>
 
 <template>
@@ -10,6 +9,5 @@ import SpendInput from '@/components/SpendInput/SpendInput.vue'
     <div class="w-full rounded"><Navbar /></div>
     <div class="h-12 w-full rounded"><RemainingAmount /></div>
     <div class="h-128 w-full rounded"><SpendColumns /></div>
-    <div class="h-16 w-full rounded"><SpendInput /></div>
   </div>
 </template>