item update

apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx

@@ -72,17 +72,17 @@ const theSimpsonsCharacters: MentionInputTriggerItem[] = [
 ].map((item) => ({
   ...item,
   label: (
-    <div className="flex items-center gap-x-2">
+    <span className="inline gap-x-1 space-x-1">
       <img
         src={faker.image.url({
-          width: 20,
-          height: 20,
+          width: 16,
+          height: 16,
         })}
-        alt={item.label}
-        className="w-4 h-4 rounded-full bg-item-active"
+        alt=""
+        className="w-3 h-3 rounded-full bg-item-active inline align-middle"
       />
-      {item.label}
-    </div>
+      <span>{item.label}</span>
+    </span>
   ),
 }));
 
@@ -102,12 +102,27 @@ const arthurCharacters: MentionInputTriggerItem[] = [
 ].map((item) => ({
   ...item,
   label: (
-    <div className="flex items-center px-3 py-2 rounded-md bg-gradient-to-r from-white to-gray-50 border border-gray-100 hover:border-gray-200 transition-colors">
-      <div className="flex flex-col">
-        <span className="font-medium text-gray-900 text-sm">{item.label}</span>
-        <span className="text-xs text-gray-500">Character</span>
+    <span className="flex flex-col justify-between space-y-2 min-w-72 py-2">
+      <h3 className="font-semibold text-gray-900 text-base leading-tight">{item.label}</h3>
+      <div className="flex flex-col space-y-2">
+        <div className="flex items-center text-sm text-gray-600">
+          <span className="w-16 text-gray-500 font-medium">Address:</span>
+          <span>
+            {faker.location.streetAddress()}, {faker.location.city()}
+          </span>
+        </div>
+        <div className="flex items-center text-sm text-gray-600">
+          <span className="w-16 text-gray-500 font-medium">Phone:</span>
+          <span>{faker.phone.number()}</span>
+        </div>
+        <div className="flex items-center text-sm text-gray-600">
+          <span className="w-16 text-gray-500 font-medium">Birthday:</span>
+          <span>
+            {faker.date.birthdate({ min: 1970, max: 2005, mode: 'year' }).toLocaleDateString()}
+          </span>
+        </div>
       </div>
-    </div>
+    </span>
   ),
 }));
 

apps/web/src/components/ui/inputs/MentionInput/MentionInput.types.ts

@@ -18,7 +18,8 @@ export type MentionStylePillStorageMap = Map<string, MentionStylePillProps>;
 
 type MentionTriggerItemBase<T = string> = {
   value: T;
-  label: string | React.ReactNode;
+  label: string | React.ReactNode; //must be all spans, is pillLabel if provided this is ignored in the pill
+  pillLabel?: string | React.ReactNode; //must be all spans
   labelMatches?: string[]; //if this is provided, we will use it to filter the items
   icon?: React.ReactNode;
   onSelect?: (d: MentionOnSelectParams) => void;

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx

@@ -23,13 +23,13 @@ export function MentionListItem<T = string>({
       className={cn(
         'group/mention-list-item',
         'flex items-center justify-between gap-x-1.5 overflow-hidden',
-        `cursor-pointer px-2.5 h-8 text-base rounded transition-all duration-100`,
+        `cursor-pointer px-2.5 min-h-8 text-base rounded transition-all duration-100`,
         isSelected && 'bg-item-hover'
       )}
     >
       <div className="flex items-center space-x-2 overflow-hidden">
         {icon && <span className="text-icon-color">{icon}</span>}
-        <Text truncate>{label}</Text>
+        {typeof label === 'string' ? <Text truncate>{label}</Text> : label}
       </div>
 
       {secondaryContent && (