Add hover highlight

src/App.vue

@@ -2,6 +2,7 @@
 import Card from '@/components/card.vue'
 import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
 import { useCards } from '@/stores/cards.ts'
+import { ref } from 'vue'
 
 const cardStore = useCards()
 function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
@@ -13,6 +14,7 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
   console.log(values)
   Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
 }
+const active = ref(-1)
 </script>
 
 <template>
@@ -21,7 +23,9 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
       <div
         v-for="(card, i) in cardStore.cards"
         :key="i"
-        class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0"
+        class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0 border-2 border-gray-200 hover:border-gray-800 transition-colors"
+        @mouseover="active = i"
+        @mouseleave="active = -1"
       >
         <input v-model="card.title" placeholder="Title" />
         <div class="flex flex-row gap-2">
@@ -61,7 +65,7 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
             placeholder="Name Text Size"
             title="Name Text Size"
           />
-          <select @change="(e) => presetChange(card, (e.target as any)!.value)">
+          <select @change="(e) => presetChange(card, (e.target as any)!.value)" title="Preset">
             <option v-for="(preset, key) in presets" :key="key" :value="key">
               {{ preset.title }}
             </option>
@@ -71,7 +75,12 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
       </div>
     </div>
     <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
-      <card v-for="(_, i) in cardStore.cards" :key="i" v-model="cardStore.cards[i]" />
+      <card
+        v-for="(_, i) in cardStore.cards"
+        :key="i"
+        v-model="cardStore.cards[i]"
+        :active="active === i"
+      />
     </div>
   </div>
 </template>