Add props to CatdBottom and CardContainer

src/components/card/CardBottom.vue

@@ -1,7 +1,17 @@
 <template>
-  <div class="flex-1 w-full h-full">
+  <div :class="containerClasses">
     <slot></slot>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { fullHeight = true } = defineProps<{
+  fullHeight?: boolean
+}>()
+
+const containerClasses = computed(
+  () => `flex-1 w-full${fullHeight ? ' h-full' : ''}`
+)
+</script>

src/components/card/CardContainer.vue

@@ -15,17 +15,18 @@ const {
 } = defineProps<{
   maxWidth?: number
   minWidth?: number
-  ratio?: 'square' | 'portrait' | 'tallPortrait'
+  ratio?: 'square' | 'portrait' | 'tallPortrait' | 'none'
 }>()
 
 const containerClasses = computed(() => {
   const baseClasses =
-    'flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
+    'flex flex-col hover:bg-white dark-theme:hover:bg-zinc-800 rounded-lg hover:shadow-sm hover:border hover:border-zinc-200 dark-theme:hover:border-zinc-700 overflow-hidden hover:p-2'
 
   const ratioClasses = {
     square: 'aspect-256/308',
     portrait: 'aspect-256/325',
-    tallPortrait: 'aspect-256/353'
+    tallPortrait: 'aspect-256/353',
+    none: ''
   }
 
   return `${baseClasses} ${ratioClasses[ratio]}`

src/components/input/SearchBox.vue

@@ -1,7 +1,8 @@
 <template>
-  <div :class="wrapperStyle">
+  <div :class="wrapperStyle" @click="focusInput">
     <i-lucide:search :class="iconColorStyle" />
     <InputText
+      ref="input"
       v-model="searchQuery"
       :placeholder="placeHolder || 'Search...'"
       type="text"
@@ -13,7 +14,7 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const { placeHolder, showBorder = false } = defineProps<{
   placeHolder?: string
@@ -22,10 +23,19 @@ const { placeHolder, showBorder = false } = defineProps<{
 // defineModel without arguments uses 'modelValue' as the prop name
 const searchQuery = defineModel<string>()
 
+const input = ref<{ $el: HTMLElement } | null>()
+const focusInput = () => {
+  if (input.value && input.value.$el) {
+    input.value.$el.focus()
+  }
+}
+
 const wrapperStyle = computed(() => {
-  return showBorder
+  const baseStyles = showBorder
     ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
     : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
+
+  return `${baseStyles} cursor-text`
 })
 
 const iconColorStyle = computed(() => {