8ebde8aa05
Some checks failed
Branch Build CE / Build Setup (push) Has been cancelled
Branch Build CE / Build-Push Admin Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Web Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Space Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Live Collaboration Docker Image (push) Has been cancelled
Branch Build CE / Build-Push API Server Docker Image (push) Has been cancelled
Branch Build CE / Build-Push Proxy Docker Image (push) Has been cancelled
Branch Build CE / Build-Push AIO Docker Image (push) Has been cancelled
Branch Build CE / Upload Build Assets (push) Has been cancelled
Branch Build CE / Build Release (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Codespell / Check for spelling errors (push) Has been cancelled
Sync Repositories / sync_changes (push) Has been cancelled
Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import Image from "next/image";
|
|
import { useTheme } from "next-themes";
|
|
// plane imports
|
|
import { useTranslation } from "@plane/i18n";
|
|
// assets
|
|
import darkOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp?url";
|
|
import lightOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-light.webp?url";
|
|
|
|
export const PageNavigationPaneOutlineTabEmptyState = () => {
|
|
// theme hook
|
|
const { resolvedTheme } = useTheme();
|
|
// asset resolved path
|
|
const resolvedPath = resolvedTheme === "light" ? lightOutlineAsset : darkOutlineAsset;
|
|
// translation
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="size-full grid place-items-center">
|
|
<div className="flex flex-col items-center gap-y-6 text-center">
|
|
<Image src={resolvedPath} width={160} height={160} alt="An image depicting the outline of a page" />
|
|
<div className="space-y-2.5">
|
|
<h4 className="text-base font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
|
|
<p className="text-sm text-custom-text-200 font-medium">
|
|
{t("page_navigation_pane.tabs.outline.empty_state.description")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|