plane/web/components/dashboard/project-empty-state.tsx
Lakhan Baheti 0165abab3e
chore: posthog events improved (#3554)
* chore: events naming convention changed

* chore: track element added for project related events

* chore: track element added for cycle related events

* chore: track element added for module related events

* chore: issue related events updated

* refactor: event tracker store

* refactor: event-tracker store

* fix: posthog changes

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
2024-02-05 13:19:07 +05:30

49 lines
1.7 KiB
TypeScript

import Image from "next/image";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication, useEventTracker, useUser } from "hooks/store";
// ui
import { Button } from "@plane/ui";
// assets
import ProjectEmptyStateImage from "public/empty-state/dashboard/project.svg";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
export const DashboardProjectEmptyState = observer(() => {
// store hooks
const {
commandPalette: { toggleCreateProjectModal },
} = useApplication();
const { setTrackElement } = useEventTracker();
const {
membership: { currentWorkspaceRole },
} = useUser();
// derived values
const canCreateProject = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
return (
<div className="h-full flex flex-col justify-center lg:w-3/5 mx-auto space-y-4">
<h4 className="text-xl font-semibold">Overview of your projects, activity, and metrics</h4>
<p className="text-custom-text-300">
Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this
page will transform into a space that helps you progress. Admins will also see items which help their team
progress.
</p>
<Image src={ProjectEmptyStateImage} className="w-full" alt="Project empty state" />
{canCreateProject && (
<div className="flex justify-center">
<Button
variant="primary"
onClick={() => {
setTrackElement("Project empty state");
toggleCreateProjectModal(true);
}}
>
Build your first project
</Button>
</div>
)}
</div>
);
});