Replace native selects with NovaSelect

resources/js/Pages/Studio/StudioGroupReleases.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { router, usePage } from '@inertiajs/react'
 import StudioLayout from '../../Layouts/StudioLayout'
+import NovaSelect from '../../components/ui/NovaSelect'
 
 export default function StudioGroupReleases() {
   const { props } = usePage()
@@ -14,9 +15,7 @@ export default function StudioGroupReleases() {
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         <div className="text-sm text-slate-400">Track the release pipeline from draft through public launch, with milestones and contributor credits.</div>
         <div className="flex items-center gap-3">
-          <select value={currentBucket} onChange={(event) => router.get(window.location.pathname, { bucket: event.target.value }, { preserveScroll: true, preserveState: true })} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm text-white outline-none">
-            {bucketOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-          </select>
+          <NovaSelect value={currentBucket} onChange={(val) => router.get(window.location.pathname, { bucket: val }, { preserveScroll: true, preserveState: true })} options={bucketOptions} searchable={false} />
           {props.createUrl ? <a href={props.createUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Create release</a> : null}
         </div>
       </div>