plane/web/components/dashboard/project-empty-state.tsx
2024-03-19 20:08:35 +05:30

49 lines
1.7 KiB
TypeScript

import { observer } from "mobx-react-lite";
import Image from "next/image";
// hooks
import { Button } from "@plane/ui";
import { EUserWorkspaceRoles } from "@/constants/workspace";
import { useApplication, useEventTracker, useUser } from "@/hooks/store";
// ui
// assets
import ProjectEmptyStateImage from "public/empty-state/dashboard/project.svg";
// constants
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>
);
});