// next import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { EmptyState } from "components/common"; // assets import emptyIssue from "public/empty-state/issue.svg"; import emptyProject from "public/empty-state/project.svg"; // icons import { Plus, PlusIcon } from "lucide-react"; export const GlobalViewEmptyState: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug } = router.query; const { commandPalette: commandPaletteStore, project: projectStore, trackEvent: { setTrackElement } } = useMobxStore(); const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null; return ( <div className="h-full w-full grid place-items-center"> {!projects || projects?.length === 0 ? ( <EmptyState image={emptyProject} title="No projects yet" description="Get started by creating your first project" primaryButton={{ icon: <Plus className="h-4 w-4" />, text: "New Project", onClick: () => { setTrackElement("ALL_ISSUES_EMPTY_STATE") commandPaletteStore.toggleCreateProjectModal(true) }, }} /> ) : ( <EmptyState title="View issues will appear here" description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done." image={emptyIssue} primaryButton={{ text: "New issue", icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />, onClick: () => { setTrackElement("ALL_ISSUES_EMPTY_STATE") commandPaletteStore.toggleCreateIssueModal(true) } }} /> )} </div> ); });