import React, { useRef, useState } from "react"; import Link from "next/link"; import { Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // hooks import { useApplication } from "hooks/store"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // icons import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react"; import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui"; // assets import packageJson from "package.json"; const helpOptions = [ { name: "Documentation", href: "https://docs.plane.so/", Icon: FileText, }, { name: "Join our Discord", href: "https://discord.com/invite/A92xrEGCge", Icon: DiscordIcon, }, { name: "Report a bug", href: "https://github.com/makeplane/plane/issues/new/choose", Icon: GithubIcon, }, { name: "Chat with us", href: null, onClick: () => (window as any).$crisp.push(["do", "chat:show"]), Icon: MessagesSquare, }, ]; export interface WorkspaceHelpSectionProps { setSidebarActive?: React.Dispatch>; } export const WorkspaceHelpSection: React.FC = observer(() => { // store hooks const { theme: { sidebarCollapsed, toggleSidebar }, commandPalette: { toggleShortcutModal }, } = useApplication(); // states const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false); // refs const helpOptionsRef = useRef(null); useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false)); const isCollapsed = sidebarCollapsed || false; return ( <>
{!isCollapsed && (
Free Plan
)}
{helpOptions.map(({ name, Icon, href, onClick }) => { if (href) return (
{name}
); else return ( ); })}
Version: v{packageJson.version}
); });