chore: Product page shows list of categories associated with it (#3400)

packages/admin-ui/ui/src/components/molecules/delimited-list/index.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import Tooltip from "../../atoms/tooltip"
+
+type DelimitedListProps = {
+  list: string[]
+  delimit?: number
+}
+
+const DelimitedList: React.FC<DelimitedListProps> = ({ list, delimit = 1 }) => {
+  if (!list.length) {
+    return <></>
+  }
+
+  const itemsToDisplay = list.slice(0, delimit).join(", ")
+  const showExtraItemsInTooltip = list.length > delimit
+  const extraItemsInToolTipCount = list.length - delimit
+
+  const ToolTipContent = () => {
+    return (
+      <div className="flex flex-col">
+        {list.slice(delimit).map((listItem) => (
+          <span key={listItem}>{listItem}</span>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <span className="inter-small-regular">
+      {itemsToDisplay}
+
+      {showExtraItemsInTooltip && (
+        <Tooltip content={<ToolTipContent />}>
+          <span className="text-grey-40">
+            {" "}
+            + {extraItemsInToolTipCount} more
+          </span>
+        </Tooltip>
+      )}
+    </span>
+  )
+}
+
+export default DelimitedList

packages/admin-ui/ui/src/components/molecules/sales-channels-display/index.tsx

@@ -13,12 +13,12 @@ const SalesChannelsDisplay = ({ channels = [] }: Props) => {
   const remainder = Math.max(channels.length - 3, 0)
 
   return (
-    <div className="flex flex-col gap-y-small">
+    <div className="gap-y-small flex flex-col">
       {channels.length > 0 && (
         <div className="flex gap-x-1">
-          <div className="flex gap-x-1 max-w-[600px] overflow-clip">
+          <div className="flex max-w-[600px] gap-x-1 overflow-clip">
             {channels.slice(0, 3).map((sc) => (
-              <SalesChannelBadge channel={sc} />
+              <SalesChannelBadge key={sc.id} channel={sc} />
             ))}
           </div>
           {remainder > 0 && (
@@ -32,7 +32,7 @@ const SalesChannelsDisplay = ({ channels = [] }: Props) => {
               }
             >
               <Badge variant="ghost" className="px-3 py-1.5">
-                <div className="flex items-center h-full inter-small-regular text-grey-50">
+                <div className="inter-small-regular text-grey-50 flex h-full items-center">
                   + {remainder} more
                 </div>
               </Badge>