Add props to CatdBottom and CardContainer

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(() => {