mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
e4f48d6878
* chore: emoji-picker-react package added * chore: emoji and emoji picker component added * chore: emoji picker custom style added * chore: migration of the emoji's * chore: migration changes * chore: project logo prop * chore: added logo props in the serializer * chore: removed unused keys * chore: implement emoji picker throughout the web app * style: emoji icon picker * chore: update project logo renderer in the space app * chore: migrations fixes --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
// hooks
|
|
// icons
|
|
import { Contrast, LayoutGrid, Users } from "lucide-react";
|
|
// helpers
|
|
import { truncateText } from "helpers/string.helper";
|
|
import { useProject } from "hooks/store";
|
|
import { ProjectLogo } from "components/project";
|
|
|
|
type Props = {
|
|
projectIds: string[];
|
|
};
|
|
|
|
export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((props) => {
|
|
const { projectIds } = props;
|
|
|
|
const { getProjectById } = useProject();
|
|
|
|
return (
|
|
<div className="relative flex flex-col gap-4 h-full">
|
|
<h4 className="font-medium">Selected Projects</h4>
|
|
<div className="relative space-y-6 overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md">
|
|
{projectIds.map((projectId) => {
|
|
const project = getProjectById(projectId);
|
|
|
|
if (!project) return;
|
|
|
|
return (
|
|
<div key={projectId} className="w-full">
|
|
<div className="flex items-center gap-1 text-sm">
|
|
<div className="h-6 w-6 grid place-items-center">
|
|
<ProjectLogo logo={project.logo_props} />
|
|
</div>
|
|
<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 px-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>
|
|
);
|
|
});
|