fix: multiple labels should wrap on cards

2025-02-01 10:43:31 +00:00
parent e421b4326c
commit c4c60916f7
6 changed files with 89 additions and 107 deletions
--- a/apps/web/src/views/board/components/Card.tsx
+++ b/apps/web/src/views/board/components/Card.tsx
@@ -0,0 +1,54 @@
+import Avatar from "~/components/Avatar";
+import Badge from "~/components/Badge";
+import LabelIcon from "~/components/LabelIcon";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
+
+const Card = ({
+  title,
+  labels,
+  members,
+}: {
+  title: string;
+  labels: { name: string; colourCode: string | null }[];
+  members: {
+    publicId: string;
+    user: { name: string | null; email: string; image: string | null } | null;
+  }[];
+}) => {
+  return (
+    <div className="flex flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300">
+      <span>{title}</span>
+      {labels.length || members.length ? (
+        <div className="mt-2 flex flex-col justify-end">
+          <div className="space-x-0.5">
+            {labels.map((label) => (
+              <Badge
+                value={label.name}
+                iconLeft={<LabelIcon colourCode={label.colourCode} />}
+              />
+            ))}
+          </div>
+          <div className="isolate flex justify-end -space-x-1 overflow-hidden">
+            {members.map(({ user }) => {
+              if (!user) return null;
+
+              const avatarUrl = user.image
+                ? getPublicUrl(user.image)
+                : undefined;
+
+              return (
+                <Avatar
+                  name={user.name ?? ""}
+                  email={user.email}
+                  imageUrl={avatarUrl}
+                />
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Card;