add: active link styling to bottom navbar

src/components/navigation/BottomNavLinkBig.tsx

@@ -1,19 +1,33 @@
 import Link from 'next/link'
 import React from 'react'
 import type { LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
+import clsx from 'clsx'
 
 type Props = {
   icon: React.ReactElement
   value: string
 } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
-function BottomNavHighlightLink({ icon, value, ...restProps }: Props) {
+function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
   return (
-    <Link {...restProps} className={`flex flex-col relative justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
-      <div className='bg-primary p-3 rounded-full'>
+    <Link {...restProps} href={href} className={clsx(
+      'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
+      isActive && 'text-foreground',
+      restProps.className ?? '',
+    )}>
+      <div className={clsx(
+        'bg-primary text-white p-3 rounded-full',
+      )}>
         {icon}
       </div>
-      <span className='text-xs2 text-disabled-text'>
+      <span className={clsx(
+              'text-xs2 text-disabled-text',
+              isActive && 'text-foreground'
+            )}>
         {value}
       </span>
     </Link>