From 0ede7cf3c9e9ab1e1b278376220f20d3a36b1cf6 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 23 Sep 2021 21:27:40 -0300
Subject: [PATCH] Migrate deprecated attribute activeClassname

---
 src/components/NavTab.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/NavTab.tsx b/src/components/NavTab.tsx
index b8ff811..e16d193 100644
--- a/src/components/NavTab.tsx
+++ b/src/components/NavTab.tsx
@@ -6,13 +6,16 @@ type NavTabProps = {
   href: string;
 };
 
-// TODO: migrate activeClassName because of: https://github.com/remix-run/react-router/releases/tag/v5.3.0
-// TODO: @types/react-router-dom still doesn't support function in className
 const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
   <Tab as={Fragment}>
     <NavLink
-      className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2"
-      activeClassName="text-link-blue border-link-blue"
+      className={(isActive) =>
+        `${
+          isActive
+            ? "text-link-blue border-link-blue"
+            : "text-gray-500 border-transparent"
+        } hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2`
+      }
       to={href}
       exact
       replace