fix: change select component

src/main.ts

@@ -7,14 +7,30 @@ import router from './router'
 import { createApp, provide, h } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { apolloClient } from './utils/graphql'
+import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'
 
 const app = createApp({
   setup() {
     provide(DefaultApolloClient, apolloClient())
   },
-  render: () => h(App),
+  render: () => h(App)
 })
 
+app.use(
+  VanillaComponents,
+  defineConfiguration({
+    RichSelect: {
+      classes: {
+        trigger:
+          'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3',
+        searchInput:
+          'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200',
+        selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white'
+      }
+    }
+  })
+)
+
 app.use(createPinia())
 app.use(router)
-app.mount('#app')
+app.mount('#app')