| @@ -153,9 +153,20 @@ | ||
| 153 | 153 | } |
| 154 | 154 | > |
| 155 | 155 | {selectedOption ? ( |
| 156 | 156 | <div className="flex items-center justify-between w-full"> |
| 157 | - <span>{selectedOption.label}</span> | |
| 157 | + <span className="flex items-center gap-2 min-w-0"> | |
| 158 | + {selectedOption.icon && ( | |
| 159 | + <img | |
| 160 | + src={selectedOption.icon} | |
| 161 | + alt="" | |
| 162 | + width={22} | |
| 163 | + height={16} | |
| 164 | + className="flex-shrink-0 rounded-[2px] object-cover ring-1 ring-black/10" | |
| 165 | + /> | |
| 166 | + )} | |
| 167 | + <span className="truncate">{selectedOption.label}</span> | |
| 168 | + </span> | |
| 158 | 169 | {showValueId && |
| 159 | 170 | selectedOption.value && |
| 160 | 171 | selectedOption.value !== "" && ( |
| 161 | 172 | <span className="text-xs text-gray-500 dark:text-gray-400 ml-2 font-medium"> |
| @@ -233,9 +244,21 @@ | ||
| 233 | 244 | : "text-gray-900 dark:text-white" |
| 234 | 245 | }`} |
| 235 | 246 | > |
| 236 | 247 | <div className="flex items-center justify-between"> |
| 237 | - <span>{option.label}</span> | |
| 248 | + <span className="flex items-center gap-2 min-w-0"> | |
| 249 | + {option.icon && ( | |
| 250 | + <img | |
| 251 | + src={option.icon} | |
| 252 | + alt="" | |
| 253 | + loading="lazy" | |
| 254 | + width={22} | |
| 255 | + height={16} | |
| 256 | + className="flex-shrink-0 rounded-[2px] object-cover ring-1 ring-black/10" | |
| 257 | + /> | |
| 258 | + )} | |
| 259 | + <span className="truncate">{option.label}</span> | |
| 260 | + </span> | |
| 238 | 261 | {showValueId && option.value && option.value !== "" && ( |
| 239 | 262 | <span className="text-xs text-gray-500 dark:text-gray-400 ml-2 font-medium"> |
| 240 | 263 | ID: {option.value} |
| 241 | 264 | </span> |
