Update tabs for mobile

src/tabs/Tabs.jsx

@@ -0,0 +1,53 @@
+import React, { useRef } from "react";
+import { useTabList, useTab, useTabPanel } from "@react-aria/tabs";
+import { Item } from "@react-stately/collections";
+import { useTabListState } from "@react-stately/tabs";
+import styles from "./Tabs.module.css";
+import classNames from "classnames";
+
+export function TabContainer(props) {
+  const state = useTabListState(props);
+  const ref = useRef();
+  const { tabListProps } = useTabList(props, state, ref);
+  return (
+    <div className={classNames(styles.tabContainer, props.className)}>
+      <ul {...tabListProps} ref={ref} className={styles.tabList}>
+        {[...state.collection].map((item) => (
+          <Tab key={item.key} item={item} state={state} />
+        ))}
+      </ul>
+      <TabPanel key={state.selectedItem?.key} state={state} />
+    </div>
+  );
+}
+
+function Tab({ item, state }) {
+  const { key, rendered } = item;
+  const ref = useRef();
+  const { tabProps } = useTab({ key }, state, ref);
+
+  return (
+    <li
+      {...tabProps}
+      ref={ref}
+      className={classNames(styles.tab, {
+        [styles.selected]: state.selectedKey === key,
+        [styles.disabled]: state.disabledKeys.has(key),
+      })}
+    >
+      {rendered}
+    </li>
+  );
+}
+
+function TabPanel({ state, ...props }) {
+  const ref = useRef();
+  const { tabPanelProps } = useTabPanel(props, state, ref);
+  return (
+    <div {...tabPanelProps} ref={ref} className={styles.tabPanel}>
+      {state.selectedItem?.props.children}
+    </div>
+  );
+}
+
+export const TabItem = Item;