doctor-mail/apps/web/src/components/layout/main/useNavItem.tsx

67 lines
1.8 KiB
TypeScript

import { api } from "@nice/client";
import { TaxonomySlug } from "@nice/common";
import { useMemo } from "react";
import {
FileTextOutlined,
ScheduleOutlined,
QuestionCircleOutlined,
FolderOutlined,
TagsOutlined
} from "@ant-design/icons";
export interface NavItem {
to: string;
label: string;
icon?: React.ReactNode;
}
export function useNavItem() {
const { data } = api.term.findMany.useQuery({
where: {
taxonomy: { slug: TaxonomySlug.CATEGORY }
}
});
const navItems = useMemo(() => {
// 定义固定的导航项
const staticItems = {
letterList: {
to: "/",
label: "公开信件",
icon: <FileTextOutlined className="text-base" />
},
letterProgress: {
to: "/letter-progress",
label: "进度查询",
icon: <ScheduleOutlined className="text-base" />
},
help: {
to: "/help",
label: "使用帮助",
icon: <QuestionCircleOutlined className="text-base" />
}
};
if (!data) {
return [staticItems.letterList, staticItems.letterProgress, staticItems.help];
}
// 构建分类导航项
const categoryItems = data.map(term => ({
to: `/write-letter?termId=${term.id}`,
label: term.name,
icon: <TagsOutlined className="text-base"></TagsOutlined>
}));
// 按照指定顺序返回导航项
return [
staticItems.letterList,
staticItems.letterProgress,
...categoryItems,
staticItems.help
];
}, [data]);
return { navItems };
}