[ui][tabs] change appearance

packages/ui/src/Tabs/Tabs.tsx

@@ -19,46 +19,39 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
   return (
     <div className="w-full">
       <div role="tablist">
-        <div className="border-b border-slate-200">
+        <nav aria-label={label} className="flex space-x-2">
-          <nav aria-label={label} className="-mb-px flex space-x-4">
+          {tabs.map((tab) => {
-            {tabs.map((tab) => {
+            const isSelected = tab.value === value;
-              const isSelected = tab.value === value;
+            const commonProps = {
-              const commonProps = {
+              'aria-label': tab.label,
-                'aria-label': tab.label,
+              'aria-selected': isSelected,
-                'aria-selected': isSelected,
+              children: tab.label,
-                children: tab.label,
+              className: clsx(
-                className: clsx(
+                isSelected
-                  isSelected
+                  ? 'bg-indigo-100 text-indigo-700'
-                    ? 'border-primary-500 text-primary-600'
+                  : 'hover:bg-slate-100 text-slate-500 hover:text-slate-700',
-                    : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
+                'px-3 py-2 font-medium text-sm rounded-md',
-                  'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm',
+              ),
-                ),
+              onClick: onChange != null ? () => onChange(tab.value) : undefined,
-                onClick:
+              role: 'tab',
-                  onChange != null ? () => onChange(tab.value) : undefined,
+            };
-                role: 'tab',
-              };
-
-              if (tab.href != null) {
-                // TODO: Allow passing in of Link component.
-                return (
-                  <Link
-                    key={String(tab.value)}
-                    href={tab.href}
-                    {...commonProps}
-                  />
-                );
-              }
 
+            if (tab.href != null) {
+              // TODO: Allow passing in of Link component.
               return (
-                <button
+                <Link
                   key={String(tab.value)}
-                  type="button"
+                  href={tab.href}
                   {...commonProps}
                 />
               );
-            })}
+            }
-          </nav>
+
-        </div>
+            return (
+              <button key={String(tab.value)} type="button" {...commonProps} />
+            );
+          })}
+        </nav>
       </div>
     </div>
   );