From 179ddf6999f16cd2f96a0992b0461c38bddd77e2 Mon Sep 17 00:00:00 2001
From: vergiLgood1 <xdamazon17@gmail.com>
Date: Sun, 23 Mar 2025 06:54:54 +0700
Subject: [PATCH] use IsActive props from sidebar component

---
 .../_components/navigations/nav-main.tsx      | 26 ++++---------------
 .../_components/users-table.tsx               |  2 +-
 sigap-website/app/_components/form-field.tsx  |  2 +-
 .../app/_components/react-hook-form-field.tsx |  2 +-
 sigap-website/app/_components/ui/input.tsx    |  2 +-
 5 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/sigap-website/app/(pages)/(admin)/_components/navigations/nav-main.tsx b/sigap-website/app/(pages)/(admin)/_components/navigations/nav-main.tsx
index e4f4c8b..b82fb49 100644
--- a/sigap-website/app/(pages)/(admin)/_components/navigations/nav-main.tsx
+++ b/sigap-website/app/(pages)/(admin)/_components/navigations/nav-main.tsx
@@ -52,7 +52,7 @@ function SubSubItemComponent({ item }: { item: SubSubItem }) {
         asChild
         className={
           isActive
-            ? "bg-primary/40 active text-primary"
+            ? "bg-muted active font-bold"
             : ""
         }
       >
@@ -75,11 +75,7 @@ function SubItemComponent({ item }: { item: SubItem }) {
       <SidebarMenuItem>
         <SidebarMenuButton
           asChild
-          className={
-            isActive
-              ? "bg-primary/40 active text-primary"
-              : ""
-          }
+          isActive={isActive}
         >
           <a href={formattedUrl}>
             {item.icon && (
@@ -97,11 +93,7 @@ function SubItemComponent({ item }: { item: SubItem }) {
       <SidebarMenuItem>
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
-            className={
-              isActive
-                ? "bg-primary/40 active text-primary"
-                : ""
-            }
+            isActive={isActive}
           >
             {item.icon && (
               <item.icon />
@@ -136,11 +128,7 @@ function RecursiveNavItem({ item, index }: { item: NavItem; index: number }) {
         <SidebarMenuButton
           tooltip={item.title}
           asChild
-          className={
-            isActive
-              ? "bg-primary/40 active text-primary"
-              : ""
-          }
+          isActive={isActive}
         >
           <a href={formattedUrl}>
             {item.icon && (
@@ -164,11 +152,7 @@ function RecursiveNavItem({ item, index }: { item: NavItem; index: number }) {
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
             tooltip={item.title}
-            className={
-              isActive
-                ? "bg-primary/40 active text-primary"
-                : ""
-            }
+            isActive={isActive}
           >
             {item.icon && (
               <item.icon />
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/users-table.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/users-table.tsx
index 9f4f870..23f2324 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/users-table.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/users-table.tsx
@@ -317,7 +317,7 @@ export const createUserColumns = (
                                     /* handle delete */
                                 }}
                             >
-                                <Trash2 className="h-4 w-4 mr-2 text-red-500" />
+                                <Trash2 className="h-4 w-4 mr-2 text-destructive" />
                                 Delete
                             </DropdownMenuItem>
                             <DropdownMenuItem
diff --git a/sigap-website/app/_components/form-field.tsx b/sigap-website/app/_components/form-field.tsx
index e8f1f0c..904a56c 100644
--- a/sigap-website/app/_components/form-field.tsx
+++ b/sigap-website/app/_components/form-field.tsx
@@ -11,7 +11,7 @@ export function FormField({ label, input, error }: FormFieldProps) {
     <div className="space-y-2">
       <Label className="text-sm text-gray-300">{label}</Label>
       {input}
-      {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+      {error && <p className="text-destructive text-xs mt-1">{error}</p>}
     </div>
   );
 }
diff --git a/sigap-website/app/_components/react-hook-form-field.tsx b/sigap-website/app/_components/react-hook-form-field.tsx
index be4d670..fddb1ef 100644
--- a/sigap-website/app/_components/react-hook-form-field.tsx
+++ b/sigap-website/app/_components/react-hook-form-field.tsx
@@ -33,7 +33,7 @@ export function ReactHookFormField({
                     {...registration}
                     {...props}
                 />
-                {error && <p className="text-sm text-red-500">{error.message}</p>}
+                {error && <p className="text-sm text-destructive">{error.message}</p>}
             </div>
         </div>
     )
diff --git a/sigap-website/app/_components/ui/input.tsx b/sigap-website/app/_components/ui/input.tsx
index ef202c2..9e2acb1 100644
--- a/sigap-website/app/_components/ui/input.tsx
+++ b/sigap-website/app/_components/ui/input.tsx
@@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          error && "ring-2 ring-red-500 focus-visible:ring-red-500",
+          error && "ring-2 ring-destructive focus-visible:ring-destructive",
           className
         )}
         ref={ref}