2022-03-12 03:27:56 +00:00
|
|
|
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';
|
2022-02-20 11:51:55 +00:00
|
|
|
|
|
|
|
const { Title } = Typography;
|
|
|
|
|
|
|
|
const Page: NextPage = () => {
|
|
|
|
const { addTemplate } = useOwnTemplates();
|
|
|
|
const { query = {} } = useRouter();
|
2022-03-12 03:27:56 +00:00
|
|
|
const { tab = 'public' } = query as {
|
2022-02-20 11:51:55 +00:00
|
|
|
tab?: string;
|
|
|
|
};
|
|
|
|
|
2022-03-12 03:27:56 +00:00
|
|
|
const navigate = useCallback((tab = 'public') => {
|
2022-02-20 11:51:55 +00:00
|
|
|
Router.push({
|
|
|
|
pathname: `/template`,
|
|
|
|
query: { tab },
|
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const handleAdd = () => {
|
2022-03-12 03:27:56 +00:00
|
|
|
addTemplate({ title: '未命名模板' }).then((res) => {
|
2022-02-20 11:51:55 +00:00
|
|
|
Router.push(`/template/${res.id}`);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SingleColumnLayout>
|
|
|
|
<Seo title="模板" />
|
|
|
|
<div className="container">
|
|
|
|
<div className={styles.titleWrap}>
|
2022-03-12 03:27:56 +00:00
|
|
|
<Title heading={3} style={{ margin: '8px 0' }}>
|
2022-03-18 09:17:17 +00:00
|
|
|
模板
|
2022-02-20 11:51:55 +00:00
|
|
|
</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;
|