Refactor tab component

components/ui/tab/index.tsx

@@ -0,0 +1,38 @@
+import { IconBack } from "~assets/icons";
+import type { ReactNode, PropsWithChildren } from "react";
+
+import styles from "./tab.module.less";
+
+interface HeaderProps {
+  title: ReactNode;
+  onBack: () => void;
+}
+
+function Tab({ children }: PropsWithChildren) {
+  return (
+    <div className={styles.tab}>
+      {children}
+    </div>
+  );
+}
+
+Tab.Header = function Header({ title, onBack }: HeaderProps) {
+  return (
+    <header className={styles.header}>
+      <button className={styles.back} onClick={onBack}>
+        <IconBack />
+      </button>
+      <h2>{title}</h2>
+    </header>
+  );
+}
+
+Tab.Body = function Body({ children }: PropsWithChildren) {
+  return (
+    <main className={styles.body}>
+      {children}
+    </main>
+  );
+}
+
+export default Tab;

components/ui/tab/tab.module.less

@@ -0,0 +1,30 @@
+.tab {
+  .header {
+    padding: .75em;
+    position: relative;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+
+    .back {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 2em;
+      font-size: 1.3em;
+      position: absolute;
+      transition: background-color .3s;
+
+      &:hover {
+        background-color: #eee;
+      }
+
+      svg {
+        width: 1em;
+      }
+    }
+  }
+
+  .body {
+    padding: 1em;
+  }
+}