fe/pages/library.tsx

import { SyntheticEvent, useState } from "react";
import Tab from "@mui/base/TabUnstyled";
import Tabs from "@mui/base/TabsUnstyled";
import TabsList from "@mui/base/TabsListUnstyled";
import TabPanel from "@mui/base/TabPanelUnstyled";

import LibrayList from "components/library/LibrayList";

import styles from "styles/library.module.scss";

const tabs = ["History", "Favorite Books"];

const Library = () => {
  const [tab, setTab] = useState(tabs[0]);

  const handleTabChange = (
    event: SyntheticEvent<Element, Event>,
    value: string | number | boolean
  ) => {
    setTab(value as string);
  };

  return (
    <Tabs
      component={"main"}
      value={tab}
      onChange={handleTabChange}
    >
      <header className={styles["library-header"]}>
        <div className="container">
          <h1>{tab}</h1>
          <TabsList className="tabs">
            {tabs.map((item) => (
              <Tab key={item} value={item} className="tab">
                {item}
              </Tab>
            ))}
          </TabsList>
        </div>
      </header>
      <div className="container">
        {tabs.map((item) => (
          <TabPanel key={item} value={item}>
            <LibrayList type={item} />
          </TabPanel>
        ))}
      </div>
    </Tabs>
  );

  // <main className="container">
  //   <h2 className="novel-title">Popular This Week</h2>
  //   <ul className="novel-list">
  //     {/* {(data?.data || []).map((item) => (
  //       <NovelItem
  //         key={item.uri}
  //         slug={item.uri}
  //         img={item.img}
  //         name={item.name}
  //       />
  //     ))} */}
  //   </ul>
  // </main>
};

export default Library;