docs: show badge for community integrations (#13691)

www/packages/docs-ui/src/components/Search/Hits/index.tsx

@@ -12,7 +12,7 @@ import {
 } from "react-instantsearch"
 import { SearchNoResult } from "../NoResults"
 import { useSearch } from "@/providers"
-import { Link, SearchHitGroupName } from "@/components"
+import { Badge, Link, SearchHitGroupName } from "@/components"
 
 export type Hierarchy = "lvl0" | "lvl1" | "lvl2" | "lvl3" | "lvl4" | "lvl5"
 
@@ -34,6 +34,7 @@ export type HitType = {
   __queryID?: string
   objectID: string
   description?: string
+  integration_vendor?: string
 }
 
 export type GroupedHitType = {
@@ -157,14 +158,14 @@ export const SearchHits = ({
           .join(" › ")
         return (
           <div
+            key={index}
             className={clsx(
-              "gap-docs_0.25 relative flex flex-1 flex-col p-docs_0.5",
+              "p-docs_0.5",
-              "overflow-x-hidden text-ellipsis whitespace-nowrap break-words",
               "hover:bg-medusa-bg-base-hover",
               "focus:bg-medusa-bg-base-hover",
-              "focus:outline-none"
+              "focus:outline-none",
+              "flex justify-between items-center"
             )}
-            key={index}
             tabIndex={index}
             data-hit
             onClick={(e) => {
@@ -173,6 +174,12 @@ export const SearchHits = ({
                 target.querySelector("a")?.click()
               }
             }}
+          >
+            <div
+              className={clsx(
+                "gap-docs_0.25 relative flex flex-1 flex-col",
+                "overflow-x-hidden text-ellipsis whitespace-nowrap break-words"
+              )}
             >
               <span
                 className={clsx(
@@ -218,6 +225,13 @@ export const SearchHits = ({
                 }}
               />
             </div>
+            {!!item.integration_vendor &&
+              item.integration_vendor !== "Medusa" && (
+                <Badge variant="blue" badgeType="shaded">
+                  Community
+                </Badge>
+              )}
+          </div>
         )
       })}
     </div>