feat: Complete basic design

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -1,19 +1,14 @@
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] w-[23rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
     :class="{
-      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
-        active,
+      'border border-solid border-woot-300 dark:border-woot-400': active,
     }"
   >
     <div
-      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
-      :class="{
-        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
-          active,
-      }"
+      class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
     >
-      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
       <!-- <fluent-icon
         v-if="active"
         icon="checkmark-circle"
@@ -22,24 +17,16 @@
         class="text-woot-500 dark:text-woot-500"
       /> -->
       <div>
-        <input type="radio" name="hotkey" value="enter" />
+        <input type="radio" name="hotkey" value="enter" :checked="active" />
       </div>
     </div>
     <div
-      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
     >
       {{ content }}
     </div>
     <div v-if="src" class="p-3">
-      <img
-        :src="src"
-        class="border border-solid rounded-md"
-        :class="
-          active
-            ? 'border-woot-75 dark:border-woot-700'
-            : 'border-slate-50 dark:border-slate-600'
-        "
-      />
+      <img :src="src" class="object-cover w-full" />
     </div>
     <slot v-else />
   </div>