Routing

2020-12-30 16:27:38 -06:00
parent 1a8d9c529e
commit e115a5a7ce
7 changed files with 71 additions and 49 deletions
@@ -1,27 +1,36 @@
 import classNames from 'classnames';
 import Icon from './Icon';
 import { Link } from 'wouter';
+import { useEffect, useState } from 'react';

-const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => (
-  <Link href={href}>
-    <a
-      onClick={onClick}
-      href="#"
-      className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-        'text-gray-500 dark:text-white': !selected,
-        'text-gray-800 dark:text-gray-600': selected,
-      })}
-    >
-      {icon && (
-        <Icon
-          icon={selected ? selectedIcon : icon}
-          className="cursor-pointer"
-          style={{ fontSize: '18px' }}
-        />
-      )}
-      <label className="block cursor-pointer">{title}</label>
-    </a>
-  </Link>
-);
+const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {
+  console.log('TAB', href, selected);
+  const [update, setUpdate] = useState(false);
+  useEffect(() => {
+    setUpdate(true);
+  }, [selected]);
+
+  return (
+    <Link href={href}>
+      <a
+        onClick={onClick}
+        href="#"
+        className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
+          'text-gray-500 dark:text-white': !selected,
+          'text-gray-800 dark:text-gray-600': selected,
+        })}
+      >
+        {icon && (
+          <Icon
+            icon={selected ? selectedIcon : icon}
+            className="cursor-pointer"
+            style={{ fontSize: '18px' }}
+          />
+        )}
+        <label className="block cursor-pointer">{title}</label>
+      </a>
+    </Link>
+  );
+};

 export default Tab;