plane/web/components/cycles/list/cycle-list-group-header.tsx
Anmol Singh Bhatia ab6f1ef780
[WEB-1298] chore: project cycle revamp (#4454)
* chore: cycle endpoint changes

* chore: completed cycle icon updated

* chore: project cycle list revamp and code refactor

* chore: cycle page improvement

* chore: added created by in retrieve endopoint

* fix: build error

* chore: cycle list page disclosure button improvement

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
2024-05-14 19:22:08 +05:30

40 lines
1.3 KiB
TypeScript

import React, { FC } from "react";
import { ChevronDown } from "lucide-react";
// types
import { TCycleGroups } from "@plane/types";
// icons
import { CycleGroupIcon } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
type Props = {
type: TCycleGroups;
title: string;
count?: number;
showCount?: boolean;
isExpanded?: boolean;
};
export const CycleListGroupHeader: FC<Props> = (props) => {
const { type, title, count, showCount = false, isExpanded = false } = props;
return (
<div className="relative flex items-center justify-between w-full gap-5 py-1.5">
<div className="flex items-center gap-5 flex-shrink-0">
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
<CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
</div>
<div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
<div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
{showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
</div>
</div>
<ChevronDown
className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
"rotate-180": isExpanded,
})}
/>
</div>
);
};