40 lines
998 B
TypeScript
40 lines
998 B
TypeScript
import { useState } from "react";
|
|
import Read from "~components/biz/read";
|
|
import Toy from "~components/biz/toy";
|
|
import Message from "~components/ui/message";
|
|
import { clsn } from "~utils";
|
|
|
|
import "~assets/global.less";
|
|
import styles from "./sidepanel.module.less";
|
|
|
|
const initialType = new URLSearchParams(location.search).get("type") || "read";
|
|
|
|
const tabItems = [
|
|
{ title: "在读", value: "read" },
|
|
{ title: "手办", value: "toy" },
|
|
{ title: "语录", value: "say" },
|
|
];
|
|
|
|
function SidePanel() {
|
|
const [type, setType] = useState(initialType);
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<nav className={styles.nav}>
|
|
{tabItems.map((item) => (
|
|
<a className={clsn(type === item.value && styles.active)}
|
|
onClick={() => setType(item.value)}
|
|
>
|
|
{item.title}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
{type === "read" && <Read />}
|
|
{type === "toy" && <Toy />}
|
|
<Message />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SidePanel;
|