feat: multi tab session

frontend/components/ui/pager-view.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import RNPagerView from "react-native-pager-view";
+
+export type PagerViewProps = ComponentPropsWithoutRef<typeof RNPagerView> & {
+  page?: number;
+  onChangePage?: (page: number) => void;
+};
+
+const PagerView = ({ page, onChangePage, ...props }: PagerViewProps) => {
+  const ref = useRef<RNPagerView>(null);
+
+  useEffect(() => {
+    if (page != null) {
+      ref.current?.setPage(page);
+    }
+  }, [page]);
+
+  return (
+    <RNPagerView
+      ref={ref}
+      {...props}
+      onPageSelected={(e) => onChangePage?.(e.nativeEvent.position)}
+    />
+  );
+};
+
+export default PagerView;

frontend/components/ui/pager-view.web.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
+import { PagerViewProps } from "./pager-view";
+
+const PagerView = ({
+  className,
+  children,
+  page,
+  initialPage,
+}: PagerViewProps) => {
+  const [curPage, setPage] = useState<number>(page || initialPage || 0);
+
+  useEffect(() => {
+    if (page != null) {
+      setPage(page);
+    }
+  }, [page]);
+
+  const content = useMemo(() => {
+    if (!Array.isArray(children)) {
+      return null;
+    }
+
+    return children.map((element, index) => {
+      return (
+        <View
+          key={element.key || index}
+          style={{ display: index === curPage ? "flex" : "none", flex: 1 }}
+        >
+          {element}
+        </View>
+      );
+    });
+  }, [curPage, children]);
+
+  return content;
+};
+
+export default PagerView;