{ "name": "IndustryBar", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/IndustryBar.tsx", "chapterTag": "05 Cards & Surfaces", "chapter": "06-cards-and-surfaces.html", "sectionId": "industry-strip", "elName": "Warm and ink surfaces", "demoUrl": "https://brand.magicblocks.ai/components/06-cards-and-surfaces#industry-strip", "hasLiveDemo": false, "description": "Slim full-width sub-nav strip beneath the topnav. Answers\n\"is this for me?\" in under half a second.", "useClient": false, "interactivity": "display", "namedExports": [ { "name": "IndustryBar", "isPrincipal": true, "isType": false }, { "name": "IndustryBarProps", "isPrincipal": false, "isType": true }, { "name": "IndustryBarItem", "isPrincipal": false, "isType": true } ], "importStatement": "import { IndustryBar } from \"@magicblocksai/ui\";", "props": [ { "name": "industries", "optional": false, "type": "IndustryBarItem[]", "doc": "Industries to render. Order is preserved as left-to-right." }, { "name": "currentSlug", "optional": true, "type": "string", "doc": "Slug of the currently-active industry. The matching link gets `aria-current=\"page\"` plus the kit's \"current\" chrome (accent dot / underline per the surface variant). Omit on non-industry pages." }, { "name": "eyebrow", "optional": true, "type": "ReactNode", "doc": "Eyebrow label rendered before the list. Default `\"For\"`." }, { "name": "surface", "optional": true, "type": "\"warm\" | \"ink\"", "doc": "Surface variant. - `\"warm\"` (default) — warm-neutral surface (`var(--bg-warm)`) with ink text. - `\"ink\"` — ink surface (`var(--ink)`) with warm-neutral text. Pick the surface that contrasts with whatever sits above (`` usually). Both pass WCAG AA-large for the 12–13px mono labels." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Compact variant. Tightens the row height (32px vs 40px) for secondary contexts (sub-pages, drawer headers, etc.). Maps to the `.industry-bar.is-compact` modifier." }, { "name": "LinkComponent", "optional": true, "type": "ComponentType>", "doc": "Custom Link component for client-side navigation. Same shim pattern as ``: ```tsx import { Link } from \"react-router-dom\"; const RouterLink = ({ href, ...props }) => ; ``` For Next.js `` accepts `href` natively so it works without a shim. When omitted the kit renders native `` tags (full-page navigation)." }, { "name": "ariaLabel", "optional": true, "type": "string", "doc": "`aria-label` on the wrapping `