@apify/ui-library 1.127.5 → 1.127.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.5",
+    "version": "1.127.6",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.29.1",
+        "@apify/ui-icons": "^1.29.2",
         "@floating-ui/react": "^0.26.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@react-hook/resize-observer": "^2.0.2",
@@ -67,5 +67,5 @@
         "src",
         "style"
     ],
-    "gitHead": "ed1183fd2d33f91e7429ae07b7e2fa6197a051e4"
+    "gitHead": "0fae65b571f8b1e6feedc7201a9b635e8e9212b4"
 }

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -3,6 +3,8 @@ import _ from 'lodash';
 import type React from 'react';
 import styled from 'styled-components';
 
+import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons';
+
 import { theme } from '../../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
 import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
@@ -14,19 +16,21 @@ export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi'
 type CodeBlockTabConfig = {
     label: string;
     language: string;
-    src: string;
+    Icon?: IconComponent;
+    /** Fallback image URL for tabs that don't have an Icon component yet */
+    src?: string;
 };
 
 export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
     cli: {
         label: 'CLI',
         language: 'bash',
-        src: 'https://apify.com/img/icons/code.svg',
+        Icon: CodeIcon,
     },
     http: {
         label: 'HTTP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/http.svg',
+        Icon: HttpIcon,
     },
     javascript: {
         label: 'JavaScript',
@@ -37,7 +41,7 @@ export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig>
     mcp: {
         label: 'MCP',
         language: 'bash',
-        src: 'https://apify.com/img/icons/mcp.svg',
+        Icon: McpIcon,
     },
     openapi: {
         label: 'OpenAPI',
@@ -201,7 +205,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
         <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
             <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
                 {tabs.map((tab) => {
-                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
+                    const { label, src, Icon } = CODE_BLOCK_TAB_CATALOG[tab.key];
                     const selected = (optimisticCurrentTabKey ?? currentTabKey) === tab.key;
 
                     const commonProps = {
@@ -211,7 +215,10 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     };
                     const children = (
                         <>
-                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
+                            {Icon
+                                ? <Icon size="20" />
+                                : <img src={src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src)} alt={label} />
+                            }
                             <HeadingShared type="titleS" as="p">
                                 {label}
                             </HeadingShared>