binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: empty state global component (#435)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2023-03-15 11:01:54 +05:30 • committed by GitHub
parent bfab4865cd
commit 636e8e6c60
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 331 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

35
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View file

@ -14,7 +14,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
// components
import { IssuesFilterView, IssuesView } from "components/core";
// ui
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton, EmptyState } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline";
@ -23,6 +23,8 @@ import type { UserAuth } from "types";
import type { GetServerSidePropsContext, NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
// image
import emptyIssue from "public/empty-state/empty-issue.svg";
const ProjectIssues: NextPage<UserAuth> = (props) => {
const router = useRouter();
@ -76,30 +78,13 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
userAuth={props}
/>
) : (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any issue yet."
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."
Icon={RectangleStackIcon}
>
<EmptySpaceItem
title="Create a new issue"
description={
<span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
create a new issue
</span>
}
Icon={PlusIcon}
action={() => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
}}
/>
</EmptySpace>
</div>
<EmptyState
type="issue"
title="Create New Issue"
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.
Create a new issue"
imgURL={emptyIssue}
/>
)
) : (
<div className="flex h-full w-full items-center justify-center">

37
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
View file

@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { PlusIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/outline";
// image
import emptyModule from "public/empty-state/empty-module.svg";
// layouts
import AppLayout from "layouts/app-layout";
@ -14,7 +17,7 @@ import modulesService from "services/modules.service";
// components
import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
// ui
import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui";
import { EmptyState, HeaderButton, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
// types
@ -103,30 +106,12 @@ const ProjectModules: NextPage = () => {
</div>
</div>
) : (
<div className="flex h-full w-full flex-col items-center justify-center px-4">
<EmptySpace
title="You don't have any module yet."
description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
Icon={RectangleGroupIcon}
>
<EmptySpaceItem
title="Create a new module"
description={
<span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">M</pre> shortcut to
create a new module
</span>
}
Icon={PlusIcon}
action={() => {
const e = new KeyboardEvent("keydown", {
key: "m",
});
document.dispatchEvent(e);
}}
/>
</EmptySpace>
</div>
<EmptyState
type="module"
title="Create New Module"
description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
imgURL={emptyModule}
/>
)
) : (
<Loader className="grid grid-cols-3 gap-4">

34
apps/app/pages/[workspaceSlug]/projects/index.tsx
View file

@ -14,14 +14,16 @@ import AppLayout from "layouts/app-layout";
import { JoinProjectModal } from "components/project/join-project-modal";
import { DeleteProjectModal, SingleProjectCard } from "components/project";
// ui
import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
import { HeaderButton, Loader, EmptyState } from "components/ui";
import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
// icons
import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import type { GetServerSidePropsContext, NextPage } from "next";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// image
import emptyProject from "public/empty-state/empty-project.svg";
const ProjectsPage: NextPage = () => {
// router
@ -80,28 +82,12 @@ const ProjectsPage: NextPage = () => {
{projects ? (
<>
{projects.length === 0 ? (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any project yet."
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
Icon={ClipboardDocumentListIcon}
>
<EmptySpaceItem
title="Create a new project"
description={
<span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">P</pre> shortcut to
create a new project
</span>
}
Icon={PlusIcon}
action={() => {
const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e);
}}
/>
</EmptySpace>
</div>
<EmptyState
type="project"
title="Create New Project"
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
imgURL={emptyProject}
/>
) : (
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
{projects.map((project) => (