From 5ae1f639851d4c1db7d669f97dbce938a4e47e74 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 13:29:55 +0530
Subject: [PATCH] fix: dropdown issue label

---
 apps/app/components/issues/select/label.tsx | 12 ++++----
 apps/app/components/ui/avatar.tsx           |  2 +-
 apps/app/components/ui/index.ts             |  1 +
 apps/app/components/ui/label-list.tsx       | 32 +++++++++++++++++++++
 4 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 apps/app/components/ui/label-list.tsx

diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 74bc87eb5..bed23fce5 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/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>
               ) : (
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index e4dc68839..2b1c7b2cc 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/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 ${
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 04cb34fa3..3c35734eb 100644
--- a/apps/app/components/ui/index.ts
+++ b/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";
diff --git a/apps/app/components/ui/label-list.tsx b/apps/app/components/ui/label-list.tsx
new file mode 100644
index 000000000..3c5459e14
--- /dev/null
+++ b/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}
+      </>
+    )}
+  </>
+);