Do things

src/App.vue

@@ -1,34 +1,88 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Card from '@/components/card.vue'
+import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
 
-const cards = ref(
+const cards = ref<CardT[]>(
   new Array(8).fill(0).map((_) => ({
-    title: '',
-    color: 'white',
-    name: '',
+    ...presets.default,
+    name: 'Name',
+    textSize: 10,
   })),
 )
+
+function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
+  if (!validPreset(preset)) {
+    return
+  }
+
+  const values = presets[preset]
+  console.log(values)
+  Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
+}
 </script>
 
 <template>
   <div class="grid grid-cols-3">
-    <div class="noPrint flex flex-col gap-3">
-      <div v-for="(card, i) in cards" :key="i" class="p-3 bg-gray-300 flex flex-col gap-1">
+    <div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
+      <div v-for="(card, i) in cards" :key="i" class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0">
         <input v-model="card.title" placeholder="Title" />
-        <input v-model="card.color" placeholder="Color" type="color" />
+        <div class="flex flex-row gap-2">
+          <input
+            v-model="card.bgColor"
+            placeholder="Title Background Color"
+            title="Title Background Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.textColor"
+            placeholder="Title Text Color"
+            title="Title Text Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.color"
+            placeholder="Background Color"
+            title="Background Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.nameColor"
+            placeholder="Name Text Color"
+            title="Name Text Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.textSize"
+            type="number"
+            min="1"
+            max="10"
+            placeholder="Name Text Size"
+            title="Name Text Size"
+          />
+          <select @change="(e) => presetChange(card, (e.target as any)!.value)">
+            <option v-for="(preset, key) in presets" :key="key" :value="key">
+              {{ preset.title }}
+            </option>
+          </select>
+        </div>
         <input v-model="card.name" placeholder="Name" />
       </div>
     </div>
-    <div class="col-span-2 grid grid-cols-2 page gap-2">
-      <card v-for="(card, i) in cards" :key="i" v-model="cards[i]" />
+    <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
+      <card v-for="(_, i) in cards" :key="i" v-model="cards[i]" />
     </div>
   </div>
 </template>
 
 <style scoped>
-input {
+input,
+select {
   @apply border-2;
-  padding: 10px;
+  padding: 0.25rem;
 }
 </style>