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>

src/assets/main.css

@@ -20,4 +20,7 @@
 
     gap: 0;
   }
+  .card {
+    border-color: var(--color-gray-200) !important;
+  }
 }

src/components/card.vue

@@ -3,11 +3,15 @@ import Logo from '@/components/logo.vue'
 import type { CardT } from '@/colors.ts'
 
 const card = defineModel<CardT>({ required: true })
+const props = defineProps<{
+  active?: boolean
+}>()
 </script>
 
 <template>
   <div
-    class="flex flex-col border-2 border-gray-200 card mx-auto w-full"
+    class="flex flex-col border-2 border-gray-200 transition-colors card mx-auto w-full"
+    :class="{ 'border-gray-800': active }"
     :style="{ backgroundColor: card.color }"
   >
     <div