mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
5b0066140f
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
// icons
|
|
import { Contrast, LayoutGrid, Users } from "lucide-react";
|
|
// helpers
|
|
import { renderEmoji } from "helpers/emoji.helper";
|
|
import { truncateText } from "helpers/string.helper";
|
|
// types
|
|
import { IProject } from "types";
|
|
|
|
type Props = {
|
|
projects: IProject[];
|
|
};
|
|
|
|
export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
|
|
const { projects } = props;
|
|
|
|
return (
|
|
<div className="hidden h-full overflow-hidden md:flex md:flex-col">
|
|
<h4 className="font-medium">Selected Projects</h4>
|
|
<div className="mt-4 h-full space-y-6 overflow-y-auto">
|
|
{projects.map((project) => (
|
|
<div key={project.id} className="w-full">
|
|
<div className="flex items-center gap-1 text-sm">
|
|
{project.emoji ? (
|
|
<span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
|
|
) : project.icon_prop ? (
|
|
<div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
|
|
) : (
|
|
<span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
|
{project?.name.charAt(0)}
|
|
</span>
|
|
)}
|
|
<h5 className="flex items-center gap-1">
|
|
<p className="break-words">{truncateText(project.name, 20)}</p>
|
|
<span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
|
|
</h5>
|
|
</div>
|
|
<div className="mt-4 w-full space-y-3 pl-2">
|
|
<div className="flex items-center justify-between gap-2 text-xs">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="text-custom-text-200" size={14} strokeWidth={2} />
|
|
<h6>Total members</h6>
|
|
</div>
|
|
<span className="text-custom-text-200">{project.total_members}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2 text-xs">
|
|
<div className="flex items-center gap-2">
|
|
<Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
|
|
<h6>Total cycles</h6>
|
|
</div>
|
|
<span className="text-custom-text-200">{project.total_cycles}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2 text-xs">
|
|
<div className="flex items-center gap-2">
|
|
<LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
|
|
<h6>Total modules</h6>
|
|
</div>
|
|
<span className="text-custom-text-200">{project.total_modules}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|