From 76b8b9eaefc87ac2da1f5e9fe209e119d53b1b20 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 28 Feb 2023 23:50:21 +0530 Subject: [PATCH] style/projects_page --- apps/app/components/project/card.tsx | 122 ---------------- apps/app/components/project/index.ts | 2 +- .../project/single-project-card.tsx | 131 ++++++++++++++++++ apps/app/components/ui/custom-menu.tsx | 6 +- .../pages/[workspaceSlug]/projects/index.tsx | 23 ++- apps/app/styles/globals.css | 9 +- apps/app/types/projects.d.ts | 1 + 7 files changed, 155 insertions(+), 139 deletions(-) delete mode 100644 apps/app/components/project/card.tsx create mode 100644 apps/app/components/project/single-project-card.tsx diff --git a/apps/app/components/project/card.tsx b/apps/app/components/project/card.tsx deleted file mode 100644 index 8100379d4..000000000 --- a/apps/app/components/project/card.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React from "react"; -import Link from "next/link"; -import { useRouter } from "next/router"; -// ui -// icons -import { - CalendarDaysIcon, - CheckIcon, - PencilIcon, - PlusIcon, - TrashIcon, - ClipboardDocumentListIcon, -} from "@heroicons/react/24/outline"; -// types -// ui -import { Button } from "components/ui"; -// hooks -import useProjectMembers from "hooks/use-project-members"; -// helpers -import { renderShortNumericDateFormat } from "helpers/date-time.helper"; -// types -import type { IProject } from "types"; - -export type ProjectCardProps = { - workspaceSlug: string; - project: IProject; - setToJoinProject: (id: string | null) => void; - setDeleteProject: (id: string | null) => void; -}; - -export const ProjectCard: React.FC = (props) => { - const { workspaceSlug, project, setToJoinProject, setDeleteProject } = props; - // router - const router = useRouter(); - // fetching project members information - const { members, isMember, canDelete, canEdit } = useProjectMembers(workspaceSlug, project.id); - - if (!members) { - return ( -
-
-
- ); - } - - return ( - <> -
-
- - {isMember ? ( -
- {canEdit && ( - - - - - - )} - {canDelete && ( - - )} -
- ) : null} -
-
-

{project.description}

-
-
-
- - {!isMember ? ( - - ) : ( -
- - Member -
- )} -
-
- - {renderShortNumericDateFormat(project.created_at)} -
-
-
- - ); -}; diff --git a/apps/app/components/project/index.ts b/apps/app/components/project/index.ts index c36630d8f..bf18fe07d 100644 --- a/apps/app/components/project/index.ts +++ b/apps/app/components/project/index.ts @@ -1,4 +1,4 @@ -export * from "./card"; +export * from "./single-project-card"; export * from "./create-project-modal"; export * from "./join-project"; export * from "./sidebar-list"; diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx new file mode 100644 index 000000000..4090d8fcd --- /dev/null +++ b/apps/app/components/project/single-project-card.tsx @@ -0,0 +1,131 @@ +import React from "react"; + +import { useRouter } from "next/router"; +import Link from "next/link"; + +// hooks +import useProjectMembers from "hooks/use-project-members"; +import useToast from "hooks/use-toast"; +// ui +import { CustomMenu, Loader } from "components/ui"; +// icons +import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { StarIcon } from "@heroicons/react/20/solid"; +// helpers +import { renderShortNumericDateFormat } from "helpers/date-time.helper"; +import { copyTextToClipboard } from "helpers/string.helper"; +// types +import type { IProject } from "types"; + +export type ProjectCardProps = { + project: IProject; + setToJoinProject: (id: string | null) => void; + setDeleteProject: (id: string | null) => void; +}; + +export const SingleProjectCard: React.FC = ({ + project, + setToJoinProject, + setDeleteProject, +}) => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + const { setToastAlert } = useToast(); + + // fetching project members information + const { members, isMember, canDelete, canEdit } = useProjectMembers( + workspaceSlug as string, + project.id + ); + + const handleCopyText = () => { + const originURL = + typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Project link copied to clipboard.", + }); + }); + }; + + return ( + <> + {members ? ( + + +
+
+ {!isMember ? ( + + ) : ( + Member + )} + + + +
+
+
+
+
{project.name}
+
+

{project.description}

+
+
+ + {renderShortNumericDateFormat(project.created_at)} +
+ {isMember ? ( +
+ {canEdit && ( + + + + + + )} + {canDelete && ( + + setDeleteProject(project.id)}> + Delete project + + + Copy project link + + + )} +
+ ) : null} +
+
+ + + ) : ( + + + + )} + + ); +}; diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx index e34390eff..b46a87863 100644 --- a/apps/app/components/ui/custom-menu.tsx +++ b/apps/app/components/ui/custom-menu.tsx @@ -11,6 +11,7 @@ type Props = { label?: string | JSX.Element; className?: string; ellipsis?: boolean; + verticalEllipsis?: boolean; width?: "sm" | "md" | "lg" | "xl" | "auto"; textAlignment?: "left" | "center" | "right"; noBorder?: boolean; @@ -30,6 +31,7 @@ const CustomMenu = ({ label, className = "", ellipsis = false, + verticalEllipsis = false, width = "auto", textAlignment, noBorder = false, @@ -37,9 +39,9 @@ const CustomMenu = ({ }: Props) => (
- {ellipsis ? ( + {ellipsis || verticalEllipsis ? ( - + ) : ( {
) : ( -
-
- {projects.map((item) => ( - - ))} -
+
+ {projects.map((project) => ( + + ))}
)} diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index ccb9ea2f1..abc50d9dc 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -4,6 +4,13 @@ @tailwind components; @tailwind utilities; +@layer components { + .text-1\.5xl { + font-size: 1.375rem; + line-height: 1.875rem; + } +} + @layer base { html { font-family: "Inter", sans-serif; @@ -24,7 +31,7 @@ } .scrollbar-enable::-webkit-scrollbar { - display: block ; + display: block; } /* Scrollbar style */ diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts index 5abb32d2a..7364682a8 100644 --- a/apps/app/types/projects.d.ts +++ b/apps/app/types/projects.d.ts @@ -1,6 +1,7 @@ import type { IUserLite, IWorkspace } from "./"; export interface IProject { + cover_image: string | null; created_at: Date; created_by: string; cycle_view: boolean;