feat: navigate to select's value (#152)

Co-authored-by: GetPsyched <[email protected]>

app/[locale]/profile/client-utils.tsx

@@ -110,10 +110,7 @@ export const Tabs = ({
   ];
 
   return select ? (
-    <Select
-      onValueChange={(value) => router.push(`/${locale}/profile/${value}`)}
-      defaultValue={tab}
-    >
+    <Select defaultValue={tab} navigate>
       <SelectTrigger className="w-[180px] px-4 py-5 text-shade-light md:hidden">
         <SelectValue />
       </SelectTrigger>

components/inputs/select.tsx

@@ -2,6 +2,7 @@
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva } from 'class-variance-authority';
+import { useRouter } from 'next/navigation';
 import * as React from 'react';
 import { RxCheck, RxChevronDown, RxChevronUp } from 'react-icons/rx';
 
@@ -24,14 +25,25 @@ function useSelect() {
 }
 
 const Select = ({
+  navigate = false,
+  onValueChange,
   variant = 'ui',
   ...props
 }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
+  navigate?: boolean;
   variant?: 'form' | 'ui';
 }) => {
+  const router = useRouter();
+
   return (
     <SelectContext.Provider value={{ variant }}>
-      <SelectPrimitive.Root {...props} />
+      <SelectPrimitive.Root
+        onValueChange={(value) => {
+          navigate && router.push(value);
+          onValueChange && onValueChange(value);
+        }}
+        {...props}
+      />
     </SelectContext.Provider>
   );
 };