chore: further build out resuable components

src/app/ui/Dropdown.tsx

@@ -1,26 +1,40 @@
 // 'use client';
+import React from 'react';
 import { BsFillCaretDownFill } from 'react-icons/bs';
 
 interface IDropdown {
   value: string;
   items: string[];
-  action: () => void;
+  action: (item: string) => void;
 }
 
-export const Dropdown = ({ value, items, action }: IDropdown) => (
-  <div className='dropdown'>
-    <div tabIndex={0} role='button' className='btn btn-ghost rounded-btn'>
-      {value} <BsFillCaretDownFill />
+export const Dropdown = ({ value, items, action }: IDropdown) => {
+  const handleClick = (item: string) => {
+    action(item);
+
+    const activeEl = document.activeElement as HTMLElement;
+    activeEl && activeEl.blur();
+  };
+
+  return (
+    <div className='dropdown' data-cy='dropdown'>
+      <div
+        tabIndex={0}
+        role='button'
+        className='btn btn-ghost btn-sm rounded-btn underline'
+      >
+        {value} <BsFillCaretDownFill />
+      </div>
+      <ul
+        tabIndex={0}
+        className='menu dropdown-content z-[1] mt-2 max-h-64 w-52 flex-nowrap overflow-scroll rounded-box bg-base-100 p-2 shadow lg:max-h-96'
+      >
+        {items.map((item) => (
+          <li key={item} data-cy='dropdown-item'>
+            <a onClick={() => handleClick(item)}>{item}</a>
+          </li>
+        ))}
+      </ul>
     </div>
-    <ul
-      tabIndex={0}
-      className='menu dropdown-content z-[1] mt-4 max-h-96 w-52 flex-nowrap overflow-scroll rounded-box bg-base-100 p-2 shadow'
-    >
-      {items.map((item) => (
-        <li key={item}>
-          <a onClick={action}>{item}</a>
-        </li>
-      ))}
-    </ul>
-  </div>
-);
+  );
+};

src/app/ui/Nav.tsx

@@ -1,16 +1,54 @@
+import Link from 'next/link';
+
 export const Nav = () => (
-  <div className='bg-base-100'>
-    <div className='navbar mx-auto lg:container'>
-      <div className='navbar-start'>
-        <a className='btn btn-ghost text-xl'>Slick Telemetry</a>
-      </div>
-      <div className='navbar-center hidden lg:flex'>
-        <ul className='menu menu-horizontal px-1'>
+  <div className='navbar mx-auto lg:container'>
+    <div className='navbar-start'>
+      <Link href='/' className='btn btn-ghost text-xl'>
+        Slick Telemetry
+      </Link>
+    </div>
+    <div className='navbar-center hidden lg:flex'>
+      <ul className='menu menu-horizontal px-1'>
+        <li>
+          <a>Schedule</a>
+        </li>
+        <li>
+          <Link href='/results'>Results</Link>
+        </li>
+        <li>
+          <a>Drivers</a>
+        </li>
+        <li>
+          <a>Constructors</a>
+        </li>
+      </ul>
+    </div>
+    <div className='navbar-end'>
+      <div className='dropdown dropdown-end'>
+        <div tabIndex={0} role='button' className='btn btn-ghost lg:hidden'>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            viewBox='0 0 24 24'
+            className='inline-block h-5 w-5 stroke-current'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth='2'
+              d='M4 6h16M4 12h16M4 18h16'
+            ></path>
+          </svg>
+        </div>
+        <ul
+          tabIndex={0}
+          className='menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow'
+        >
           <li>
             <a>Schedule</a>
           </li>
           <li>
-            <a>Results</a>
+            <Link href='/results'>Results</Link>
           </li>
           <li>
             <a>Drivers</a>
@@ -20,47 +58,11 @@ export const Nav = () => (
           </li>
         </ul>
       </div>
-      <div className='navbar-end'>
-        <div className='dropdown dropdown-end'>
-          <div tabIndex={0} role='button' className='btn btn-ghost lg:hidden'>
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              fill='none'
-              viewBox='0 0 24 24'
-              className='inline-block h-5 w-5 stroke-current'
-            >
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth='2'
-                d='M4 6h16M4 12h16M4 18h16'
-              ></path>
-            </svg>
-          </div>
-          <ul
-            tabIndex={0}
-            className='menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow'
-          >
-            <li>
-              <a>Schedule</a>
-            </li>
-            <li>
-              <a>Results</a>
-            </li>
-            <li>
-              <a>Drivers</a>
-            </li>
-            <li>
-              <a>Constructors</a>
-            </li>
-          </ul>
-        </div>
-        <div className='hidden items-center gap-2 lg:flex'>
-          <div className='h-3 w-3 rounded-full bg-amber-300'></div>
-          <p className='text-sm font-bold'>
-            53 days until <span className='underline'>Winter Testing</span>
-          </p>
-        </div>
+      <div className='hidden items-center gap-2 lg:flex'>
+        <div className='h-3 w-3 rounded-full bg-amber-300'></div>
+        <p className='text-sm font-bold'>
+          53 days until <span className='underline'>Winter Testing</span>
+        </p>
       </div>
     </div>
   </div>

src/app/ui/Tabs.tsx

@@ -37,11 +37,13 @@ export const Tabs = ({ headers, containers }: ITabs) => {
   ));
 
   return (
-    <div className='container mx-auto mt-4 pb-8'>
-      <div role='tablist' className='tabs-boxed tabs my-4'>
-        {TabButtons}
-      </div>
+    <div className='container mx-auto mt-4 pb-24'>
       {TabContainers}
+      <div className='fixed bottom-0 left-0 right-0 mx-auto max-w-screen-md lg:bottom-4'>
+        <div role='tablist' className='tabs-boxed tabs p-4'>
+          {TabButtons}
+        </div>
+      </div>
     </div>
   );
 };