From 2b2c056510ae0fc3e2e7821ea7b18386ede5732a Mon Sep 17 00:00:00 2001
From: Antriksh Kumar <68548165+heydoyouknowme0@users.noreply.github.com>
Date: Thu, 25 Apr 2024 05:54:00 +0530
Subject: [PATCH] feat: navigate to select's value (#152)

Co-authored-by: GetPsyched <priyanshu@getpsyched.dev>
---
 app/[locale]/profile/client-utils.tsx |  5 +----
 components/inputs/select.tsx          | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/profile/client-utils.tsx b/app/[locale]/profile/client-utils.tsx
index 4940e285..b152125d 100644
--- a/app/[locale]/profile/client-utils.tsx
+++ b/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>
diff --git a/components/inputs/select.tsx b/components/inputs/select.tsx
index 15dc7ea3..42aab224 100644
--- a/components/inputs/select.tsx
+++ b/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>
   );
 };