41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import { useCurrentWorkspaceId } from '../../store/user';
|
|
import { trpc } from '../../api/trpc';
|
|
import { Button, Card } from 'antd';
|
|
import { EditOutlined, EyeOutlined } from '@ant-design/icons';
|
|
|
|
export const MonitorPageList: React.FC = React.memo(() => {
|
|
const workspaceId = useCurrentWorkspaceId()!;
|
|
const { data: pages = [] } = trpc.monitor.getAllPages.useQuery({
|
|
workspaceId,
|
|
});
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="px-8 py-4">
|
|
<Button type="primary" onClick={() => navigate('/monitor/pages/add')}>
|
|
New page
|
|
</Button>
|
|
|
|
<div className="mt-4 flex flex-col gap-2">
|
|
{pages.map((p) => (
|
|
<Card bodyStyle={{ padding: 12 }}>
|
|
<div className="flex">
|
|
<div className="flex-1">{p.title}</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
icon={<EyeOutlined />}
|
|
onClick={() => navigate(`/status/${p.slug}`)}
|
|
/>
|
|
<Button icon={<EditOutlined />} />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
MonitorPageList.displayName = 'MonitorPageList';
|