import * as React from "react"; import { BarChart3, Layers, MonitorSmartphone } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DocsNavMultiProductFavoritesFive } from "@/registry/docs-nav-multi-product-favorites-five/docs-nav-multi-product-favorites-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof DocsNavMultiProductFavoritesFive >; const products: ComponentProps["products"] = [ { id: "workspace", name: "Workspace", description: "Collaboration hub", icon: , }, { id: "analytics", name: "Analytics", description: "BI and dashboards", icon: , }, { id: "mobile", name: "Mobile", description: "iOS & Android", icon: , }, ]; const sections: ComponentProps["sections"] = [ { id: "workspace-getting-started", title: "Getting started", description: "Configure workspace foundations", productId: "workspace", items: [ { id: "workspace-overview", label: "Workspace overview", href: "#workspace-overview", description: "Understand core objects, roles, and governance.", productId: "workspace", updatedTag: "Updated Oct 2024", isFavorite: true, }, { id: "workspace-permissions", label: "Permissions matrix", href: "#workspace-permissions", description: "Map role-based access for teams and partners.", productId: "workspace", children: [ { id: "workspace-rls", label: "Row-level security", href: "#workspace-rls", description: "Configure granular data access policies.", productId: "workspace", }, ], }, ], }, { id: "workspace-automation", title: "Automation", productId: "workspace", items: [ { id: "workspace-rules", label: "Automation rules", href: "#workspace-rules", description: "Trigger events, actions, and workflows.", productId: "workspace", }, ], }, { id: "analytics-dashboards", title: "Dashboards", description: "Build and share insights", productId: "analytics", items: [ { id: "analytics-quickstart", label: "Analytics quickstart", href: "#analytics-quickstart", productId: "analytics", updatedTag: "New", }, { id: "analytics-embedded", label: "Embedded analytics", href: "#analytics-embedded", productId: "analytics", description: "Blend dashboards into your app with fine-grained control.", }, ], }, { id: "mobile-sdk", title: "Mobile SDK", productId: "mobile", items: [ { id: "mobile-auth", label: "Mobile auth", href: "#mobile-auth", productId: "mobile", }, { id: "mobile-notifications", label: "Notifications", href: "#mobile-notifications", productId: "mobile", description: "Push, in-app, and scheduling patterns.", }, ], }, ]; export function DocsNavMultiProductFavoritesFiveDemo() { const [activeProductId, setActiveProductId] = React.useState(products[0]?.id); const [favorites, setFavorites] = React.useState< NonNullable >([ { id: "workspace-overview", label: "Workspace overview", href: "#workspace-overview", productId: "workspace", updatedAt: "3d ago", }, ]); const [activeItemId, setActiveItemId] = React.useState( favorites[0]?.id ?? undefined, ); const toggleFavorite: ComponentProps["onFavoriteToggle"] = ( itemId: string, pressed: boolean, ) => { const item = sections .flatMap((section: ComponentProps["sections"][number]) => section.items) .flatMap((item: ComponentProps["sections"][number]["items"][number]) => flatten(item), ); const target = item.find( (entry: ComponentProps["sections"][number]["items"][number]) => entry.id === itemId, ); if (!target) return; setFavorites((prev) => { if (pressed) { if (prev?.some((favorite) => favorite.id === itemId)) { return prev; } return [ ...(prev ?? []), { id: target.id, label: target.label, href: target.href, productId: target.productId, updatedAt: "Just now", }, ]; } return prev?.filter((favorite) => favorite.id !== itemId) ?? []; }); }; return ( setActiveItemId(item.id)} >

Multi-product doc hub

Switch products without losing context

Toggle products from the selector, pin favorites, and keep frequently updated docs in view. The navigation adapts instantly while the content canvas stays anchored.

Permissions matrix

Map workspace roles to object-level permissions. Use the star icons to favorite high-velocity references and make them available across teams.

Tip Favorites are product-scoped here, but you can persist them to user profiles via API to keep the experience aligned across devices.

Embedded analytics

Share dashboards with customers while controlling branding, filters, and data access. Use callouts to capture integration patterns per product.

Mobile notifications

Blend push, in-app, and scheduling mechanisms. Favorites keep shipping checklists handy as you switch between mobile surfaces.

); } function flatten( item: ComponentProps["sections"][number]["items"][number], ): ComponentProps["sections"][number]["items"] { return [ { id: item.id, label: item.label, href: item.href, productId: item.productId, }, ...(item.children?.flatMap((child) => flatten(child)) ?? []), ]; } export default DocsNavMultiProductFavoritesFiveDemo;

Simple