docs: add search to workflows reference (#11054)

* docs: add search to workflows reference

* fix error

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -17,9 +17,35 @@ export const CardDefaultLayout = ({
   children,
   badge,
   rightIcon: RightIconComponent,
+  highlightText = [],
 }: CardProps) => {
   const isExternal = useIsExternalLink({ href })
 
+  const getHighlightedText = (textToHighlight: string) => {
+    if (!highlightText.length) {
+      return textToHighlight
+    }
+
+    const parts = textToHighlight.split(
+      new RegExp(`(${highlightText.join("|")})`, "gi")
+    )
+    return parts.map((part, index) => {
+      const isHighlighted = highlightText.some((highlight) => {
+        return part.toLowerCase() === highlight.toLowerCase()
+      })
+      return isHighlighted ? (
+        <span
+          key={index}
+          className="bg-medusa-tag-blue-bg px-px rounded-s-docs_xxs"
+        >
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    })
+  }
+
   return (
     <div
       className={clsx(
@@ -52,11 +78,13 @@ export const CardDefaultLayout = ({
       >
         {title && (
           <div className="text-small-plus text-medusa-fg-base truncate">
-            {title}
+            {getHighlightedText(title)}
           </div>
         )}
         {text && (
-          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
+          <span className="text-small-plus text-medusa-fg-subtle">
+            {getHighlightedText(text)}
+          </span>
         )}
         {children}
       </div>

www/packages/docs-ui/src/components/Card/index.tsx

@@ -23,6 +23,7 @@ export type CardProps = {
   iconClassName?: string
   children?: React.ReactNode
   badge?: BadgeProps
+  highlightText?: string[]
 }
 
 export const Card = ({ type = "default", ...props }: CardProps) => {