refactor: Use Nav as a wrapper

open-sauced · Jul 9, 2022 · e7ff5bb · e7ff5bb
1 parent d529e43
commit e7ff5bb
Showing 1 changed file with 29 additions and 25 deletions.
diff --git a/components/organisms/toolist/nav.tsx b/components/organisms/toolist/nav.tsx
@@ -8,32 +8,36 @@ const Nav: React.FC = () => {
   const { toolList, navbarTool, portalName } = useNav();
 
   return (
-    <nav className="tool-list-nav min-h-[50px] bg-slate-50 border-b pt-3">
-      <div className="px-[64px] flex flex-row gap-2">
-        {toolList.map((tool, index) => 
-          <div 
-            key={index} className={`nav-tool-item ${navbarTool === tool.name ? "border-b-2 border-[#FFA01C]" : ""}`}>
-            <Link
-              href={tool.name === "nextjs" ?
-                `${portalName}` :
-                `${portalName}?tool=${tool.name}`
+    <nav 
+      role="tablist"
+      aria-orientation="horizontal"
+      aria-label="Browse the tools"
+      tabIndex={0}
+      className="tool-list-nav flex flex-row gap-2 px-16 bg-slate-50 border-b pt-3">
+
+      {toolList.map((tool, index) => 
+        <div 
+          key={index} className={`nav-tool-item ${navbarTool === tool.name ? "border-b-2 border-[#FFA01C]" : ""}`}>
+          <Link
+            href={tool.name === "nextjs" ?
+              `${portalName}` :
+              `${portalName}?tool=${tool.name}`
+            }
+          >
+            <Button disabled={navbarTool === tool.name} size="xlarge" type="text" className="!px-4 hover:!bg-slate-100">
+              <span className={"text-base " + (navbarTool === tool.name ? "text-slate-900" : "text-slate-500")}>
+                {tool.name}
+              </span>
+              {
+                tool.numOf && 
+                  <div className="ml-2 py-0.5 px-1.5 bg-slate-200 text-slate-500 border rounded-full text-xs font-semibold">
+                    {tool.numOf}
+                  </div>
               }
-            >
-              <Button disabled={navbarTool === tool.name} size="xlarge" type="text" className="!px-4 hover:!bg-slate-100">
-                <span className={"text-base " + (navbarTool === tool.name ? "text-slate-900" : "text-slate-500")}>
-                  {tool.name}
-                </span>
-                {
-                  tool.numOf && 
-                    <div className="ml-2 py-0.5 px-1.5 bg-slate-200 text-slate-500 border rounded-full text-xs font-semibold">
-                      {tool.numOf}
-                    </div>
-                }
-              </Button>
-            </Link>
-          </div>
-        )}
-      </div>
+            </Button>
+          </Link>
+        </div>
+      )}
     </nav>
   );
 };