feat: add clsx

package.json

@@ -15,6 +15,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.34.16",

src/App.tsx

@@ -1,17 +1,33 @@
-import { Routes, Route, Link } from 'react-router-dom'
+import { Routes, Route, Link, useLocation } from 'react-router-dom'
 import Homepage from '@pages/homepage'
 import About from '@pages/about'
+import clsx from 'clsx'
 
 function App() {
+  const { pathname } = useLocation()
   return (
     <>
       <nav>
         <ul className="flex justify-center gap-8">
-          <li className="border border-black p-8">
-            <Link to="/">Go to homepage</Link>
+          <li>
+            <Link
+              to="/"
+              className={clsx('hover:text-blue-500', {
+                'border-b-4 border-blue-400 text-blue-700': pathname === '/',
+              })}
+            >
+              Go to homepage
+            </Link>
           </li>
-          <li className="border border-black p-8">
-            <Link to="/about">Go to about</Link>
+          <li>
+            <Link
+              to="/about"
+              className={clsx('hover:text-blue-500', {
+                'border-b-4 border-blue-400 text-blue-700': pathname === '/about',
+              })}
+            >
+              Go to about
+            </Link>
           </li>
         </ul>
       </nav>

yarn.lock

@@ -1047,6 +1047,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"