From 1dff6b63f8be6af8a0f327870232447a6c71e9bb Mon Sep 17 00:00:00 2001 From: sabith-tu <95301637+sabith-tu@users.noreply.github.com> Date: Wed, 22 Nov 2023 15:34:06 +0530 Subject: [PATCH] style: new empty project screen (#2832) --- web/components/project/card-list.tsx | 10 ++-- web/components/project/empty-state.tsx | 52 +++++++++++++++++++ .../empty-state/Project_full_screen.svg | 31 +++++++++++ 3 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 web/components/project/empty-state.tsx create mode 100644 web/public/empty-state/Project_full_screen.svg diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx index f364be084..cb7aece1e 100644 --- a/web/components/project/card-list.tsx +++ b/web/components/project/card-list.tsx @@ -4,10 +4,10 @@ import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { ProjectCard } from "components/project"; -import { EmptyState } from "components/common"; +import { EmptyState } from "components/project/empty-state"; import { Loader } from "@plane/ui"; // images -import emptyProject from "public/empty-state/project.svg"; +import emptyProject from "public/empty-state/Project_full_screen.svg"; // icons import { Plus } from "lucide-react"; @@ -52,11 +52,11 @@ export const ProjectCardList: FC = observer((props) => { ) : ( , - text: "New Project", + text: "Start something new", onClick: () => commandPaletteStore.toggleCreateProjectModal(true), }} /> diff --git a/web/components/project/empty-state.tsx b/web/components/project/empty-state.tsx new file mode 100644 index 000000000..359cb31da --- /dev/null +++ b/web/components/project/empty-state.tsx @@ -0,0 +1,52 @@ +import React from "react"; + +import Image from "next/image"; + +// ui +import { Button } from "@plane/ui"; + +type Props = { + title: string; + description?: React.ReactNode; + image: any; + primaryButton?: { + icon?: any; + text: string; + onClick: () => void; + }; + secondaryButton?: React.ReactNode; + disabled?: boolean; +}; + +export const EmptyState: React.FC = ({ + title, + description, + image, + primaryButton, + secondaryButton, + disabled = false, +}) => ( +
+
+ {primaryButton?.text} +
+
+
{title}
+ {description &&

{description}

} +
+ {primaryButton && ( + + )} + {secondaryButton} +
+
+
+); diff --git a/web/public/empty-state/Project_full_screen.svg b/web/public/empty-state/Project_full_screen.svg new file mode 100644 index 000000000..ce3738507 --- /dev/null +++ b/web/public/empty-state/Project_full_screen.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +