docs: add integrations page (#7421)

* add integrations page

* update payment provider docs

* use stripe icon

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

@@ -7,26 +7,50 @@ import { SidebarItemType } from "types"
 type ChildDocsProps = {
   onlyTopLevel?: boolean
   type?: "sidebar" | "item"
-  filters?: string[]
+  hideItems?: string[]
+  showItems?: string[]
+  hideTitle?: boolean
 }
 
 export const ChildDocs = ({
   onlyTopLevel = false,
-  filters = [],
+  hideItems = [],
+  showItems,
   type = "sidebar",
+  hideTitle = false,
 }: ChildDocsProps) => {
   const { currentItems, getActiveItem } = useSidebar()
+  const filterType = useMemo(() => {
+    return showItems !== undefined
+      ? "show"
+      : hideItems.length > 0
+      ? "hide"
+      : "all"
+  }, [showItems, hideItems])
+
+  const filterCondition = (item: SidebarItemType): boolean => {
+    switch (filterType) {
+      case "hide":
+        return (
+          (!item.path || !hideItems.includes(item.path)) &&
+          !hideItems.includes(item.title)
+        )
+      case "show":
+        return (
+          (item.path !== undefined && showItems!.includes(item.path)) ||
+          showItems!.includes(item.title)
+        )
+      case "all":
+        return true
+    }
+  }
 
   const filterItems = (items: SidebarItemType[]): SidebarItemType[] => {
     return items
-      .filter(
-        (item) =>
-          (!item.path || !filters.includes(item.path)) &&
-          !filters.includes(item.title)
-      )
+      .filter(filterCondition)
       .map((item) => Object.assign({}, item))
       .map((item) => {
-        if (item.children) {
+        if (item.children && filterType === "hide") {
           item.children = filterItems(item.children)
         }
 
@@ -44,7 +68,7 @@ export const ChildDocs = ({
             top: [...(getActiveItem()?.children || [])],
             bottom: [],
           }
-    if (!filters.length || !targetItems) {
+    if (filterType === "all" || !targetItems) {
       return targetItems
     }
 
@@ -53,7 +77,7 @@ export const ChildDocs = ({
       top: filterItems(targetItems.top),
       bottom: filterItems(targetItems.bottom),
     }
-  }, [currentItems, type, getActiveItem])
+  }, [currentItems, type, getActiveItem, filterItems])
 
   const getTopLevelElms = (items?: SidebarItemType[]) => (
     <CardList
@@ -77,7 +101,7 @@ export const ChildDocs = ({
         <React.Fragment key={key}>
           {HeadingComponent && (
             <>
-              <HeadingComponent>{item.title}</HeadingComponent>
+              {!hideTitle && <HeadingComponent>{item.title}</HeadingComponent>}
               <CardList
                 items={
                   item.children?.map((childItem) => ({