plane/apps/app/components/ui/labels-list.tsx

33 lines
795 B
TypeScript
Raw Normal View History

2023-03-02 07:59:55 +00:00
import React from "react";
type IssueLabelsListProps = {
2023-03-02 07:59:55 +00:00
labels?: (string | undefined)[];
length?: number;
showLength?: boolean;
};
export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
2023-03-02 07:59:55 +00:00
labels,
length = 5,
showLength = true,
}) => (
<>
{labels && (
<>
{labels.map((color, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
`}
style={{
2023-03-05 14:52:01 +00:00
backgroundColor: color && color !== "" ? color : "#000000",
2023-03-02 07:59:55 +00:00
}}
/>
</div>
))}
{labels.length > length ? <span>+{labels.length - length}</span> : null}
</>
)}
</>
);