[ui][tabs] change appearance

packages/ui/src/Tabs/Tabs.tsx

@@ -19,8 +19,7 @@ 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) => {
             const isSelected = tab.value === value;
             const commonProps = {
@@ -29,12 +28,11 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
               children: tab.label,
               className: clsx(
                 isSelected
-                    ? 'border-primary-500 text-primary-600'
+                  ? 'bg-indigo-100 text-indigo-700'
-                    : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
+                  : 'hover:bg-slate-100 text-slate-500 hover:text-slate-700',
-                  'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm',
+                'px-3 py-2 font-medium text-sm rounded-md',
               ),
-                onClick:
+              onClick: onChange != null ? () => onChange(tab.value) : undefined,
-                  onChange != null ? () => onChange(tab.value) : undefined,
               role: 'tab',
             };
 
@@ -50,16 +48,11 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
             }
 
             return (
-                <button
+              <button key={String(tab.value)} type="button" {...commonProps} />
-                  key={String(tab.value)}
-                  type="button"
-                  {...commonProps}
-                />
             );
           })}
         </nav>
       </div>
     </div>
-    </div>
   );
 }