forked from github/plane
8d15b9e7de
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import React, { FC } from "react";
|
||
import { observer } from "mobx-react-lite";
|
||
import { Plus } from "lucide-react";
|
||
// mobx store
|
||
import { useMobxStore } from "lib/mobx/store-provider";
|
||
// components
|
||
import { PagesListView } from "components/pages/pages-list";
|
||
import { NewEmptyState } from "components/common/new-empty-state";
|
||
// ui
|
||
import { Loader } from "@plane/ui";
|
||
// assets
|
||
import emptyPage from "public/empty-state/empty_page.png";
|
||
// helpers
|
||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||
|
||
export const RecentPagesList: FC = observer(() => {
|
||
// store
|
||
const {
|
||
commandPalette: commandPaletteStore,
|
||
page: { recentProjectPages },
|
||
} = useMobxStore();
|
||
|
||
const isEmpty = recentProjectPages && Object.values(recentProjectPages).every((value) => value.length === 0);
|
||
|
||
if (!recentProjectPages) {
|
||
return (
|
||
<Loader className="space-y-4">
|
||
<Loader.Item height="40px" />
|
||
<Loader.Item height="40px" />
|
||
<Loader.Item height="40px" />
|
||
</Loader>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{Object.keys(recentProjectPages).length > 0 && !isEmpty ? (
|
||
<>
|
||
{Object.keys(recentProjectPages).map((key) => {
|
||
if (recentProjectPages[key]?.length === 0) return null;
|
||
|
||
return (
|
||
<div key={key}>
|
||
<h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize">
|
||
{replaceUnderscoreIfSnakeCase(key)}
|
||
</h2>
|
||
<PagesListView pages={recentProjectPages[key]} />
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
) : (
|
||
<>
|
||
<NewEmptyState
|
||
title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
|
||
description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
|
||
image={emptyPage}
|
||
comicBox={{
|
||
title: "A page can be a doc or a doc of docs.",
|
||
description:
|
||
"We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
|
||
direction: "right",
|
||
}}
|
||
primaryButton={{
|
||
icon: <Plus className="h-4 w-4" />,
|
||
text: "Create your first page",
|
||
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
|
||
}}
|
||
/>
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
});
|