mirror of https://github.com/fantasticit/think.git
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
|
import type { NextPage } from "next";
|
||
|
|
import Router, { useRouter } from "next/router";
|
||
|
|
import React, { useCallback } from "react";
|
||
|
|
import { Typography, Button, Tabs, TabPane } from "@douyinfe/semi-ui";
|
||
|
|
import { Seo } from "components/seo";
|
||
|
|
import { SingleColumnLayout } from "layouts/single-column";
|
||
|
|
import { usePublicTemplates, useOwnTemplates } from "data/template";
|
||
|
|
import { TemplateList } from "components/template/list";
|
||
|
|
import styles from "./index.module.scss";
|
||
|
|
|
||
|
|
const { Title } = Typography;
|
||
|
|
|
||
|
|
const Page: NextPage = () => {
|
||
|
|
const { addTemplate } = useOwnTemplates();
|
||
|
|
const { query = {} } = useRouter();
|
||
|
|
const { tab = "public" } = query as {
|
||
|
|
tab?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const navigate = useCallback((tab = "public") => {
|
||
|
|
Router.push({
|
||
|
|
pathname: `/template`,
|
||
|
|
query: { tab },
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleAdd = () => {
|
||
|
|
addTemplate({ title: "未命名模板" }).then((res) => {
|
||
|
|
Router.push(`/template/${res.id}`);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SingleColumnLayout>
|
||
|
|
<Seo title="模板" />
|
||
|
|
<div className="container">
|
||
|
|
<div className={styles.titleWrap}>
|
||
|
|
<Title heading={3} style={{ margin: "8px 0" }}>
|
||
|
|
快捷访问
|
||
|
|
</Title>
|
||
|
|
<Button onClick={handleAdd}>新建模板</Button>
|
||
|
|
</div>
|
||
|
|
<Tabs
|
||
|
|
type="button"
|
||
|
|
style={{ marginTop: 16 }}
|
||
|
|
activeKey={tab}
|
||
|
|
onChange={(tab) => navigate(tab)}
|
||
|
|
>
|
||
|
|
<TabPane tab="公开模板" itemKey="public">
|
||
|
|
<TemplateList hook={usePublicTemplates} pageSize={9} />
|
||
|
|
</TabPane>
|
||
|
|
<TabPane tab="我创建的" itemKey="own">
|
||
|
|
<TemplateList hook={useOwnTemplates} pageSize={9} />
|
||
|
|
</TabPane>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
</SingleColumnLayout>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Page;
|