import { FC } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; import { FileText, Plus } from "lucide-react"; // hooks import { useApplication, useProject } from "hooks/store"; // services import { PageService } from "services/page.service"; // ui import { Breadcrumbs, Button } from "@plane/ui"; // helpers import { renderEmoji } from "helpers/emoji.helper"; // fetch-keys import { PAGE_DETAILS } from "constants/fetch-keys"; export interface IPagesHeaderProps { showButton?: boolean; } const pageService = new PageService(); export const PageDetailsHeader: FC = observer((props) => { const { showButton = false } = props; const router = useRouter(); const { workspaceSlug, pageId } = router.query; const { commandPalette: commandPaletteStore } = useApplication(); const { currentProjectDetails } = useProject(); const { data: pageDetails } = useSWR( workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null, workspaceSlug && currentProjectDetails?.id ? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string) : null ); return (
{currentProjectDetails?.name.charAt(0)} ) } link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} /> } label="Pages" link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`} /> } label={pageDetails?.name ?? "Page"} />
{showButton && (
)}
); });