fix: dropdown issue label

apps/app/components/issues/select/label.tsx

@@ -20,6 +20,7 @@ import issuesServices from "services/issues.service";
 import type { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IssueLabelList } from "components/ui";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -70,12 +71,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             >
               {value && value.length > 0 ? (
                 <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
-                  <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
-                    {Array.isArray(value)
-                      ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
-                        "Labels"
-                      : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
-                  </span>
+                  <IssueLabelList
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                    length={3}
+                    showLength
+                  />
                   <span className=" text-[#495057]">{value.length} Labels</span>
                 </span>
               ) : (

apps/app/components/ui/avatar.tsx

@@ -18,7 +18,7 @@ type AvatarProps = {
 };
 
 export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
-  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
+  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`h-5 w-5 rounded-full border-2 ${

apps/app/components/ui/index.ts

@@ -15,3 +15,4 @@ export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
 export * from "./tooltip";
+export * from "./label-list";

apps/app/components/ui/label-list.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+type IssueLabelListProps = {
+  labels?: (string | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelList: React.FC<IssueLabelListProps> = ({
+  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={{
+                backgroundColor: color,
+              }}
+            />
+          </div>
+        ))}
+        {labels.length > length ? <span>+{labels.length - length}</span> : null}
+      </>
+    )}
+  </>
+);