| }, [currentWorkspace, router]) | }, [currentWorkspace, router]) | ||||
| return ( | return ( | ||||
| <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'> | |||||
| <div className='sticky top-0 z-10 flex h-[80px] shrink-0 flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'> | |||||
| <div ref={containerRef} className={`scroll-container relative flex grow flex-col overflow-y-auto rounded-t-xl outline-none ${activeTab === 'dataset' ? 'bg-background-body' : 'bg-components-panel-bg'}`}> | |||||
| <div className={`sticky top-0 z-10 flex shrink-0 flex-wrap items-center justify-between gap-y-2 rounded-t-xl px-6 py-2 ${activeTab === 'api' ? 'border-b border-solid border-b-divider-regular' : ''} ${activeTab === 'dataset' ? 'bg-background-body' : 'bg-components-panel-bg'}`}> | |||||
| <TabSliderNew | <TabSliderNew | ||||
| value={activeTab} | value={activeTab} | ||||
| onChange={newActiveTab => setActiveTab(newActiveTab)} | onChange={newActiveTab => setActiveTab(newActiveTab)} |
| </button> | </button> | ||||
| )} | )} | ||||
| </div> | </div> | ||||
| <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'prose-invert')}> | |||||
| <article className={cn('prose-xl prose', theme === Theme.dark && 'prose-invert')}> | |||||
| {Template} | {Template} | ||||
| </article> | </article> | ||||
| </div> | </div> |
| key={option.value} | key={option.value} | ||||
| onClick={() => onChange(option.value)} | onClick={() => onChange(option.value)} | ||||
| className={cn( | className={cn( | ||||
| 'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active', | |||||
| value === option.value && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs', | |||||
| 'mr-1 flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover', | |||||
| value === option.value && 'border-components-main-nav-nav-button-border bg-state-base-hover text-components-main-nav-nav-button-text-active shadow-xs', | |||||
| )} | )} | ||||
| > | > | ||||
| {option.icon} | {option.icon} |
| children, | children, | ||||
| }: HeaderWrapperProps) => { | }: HeaderWrapperProps) => { | ||||
| const pathname = usePathname() | const pathname = usePathname() | ||||
| const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname) | |||||
| const isBordered = ['/apps', '/datasets/create', '/tools'].includes(pathname) | |||||
| // Check if the current path is a workflow canvas & fullscreen | // Check if the current path is a workflow canvas & fullscreen | ||||
| const inWorkflowCanvas = pathname.endsWith('/workflow') | const inWorkflowCanvas = pathname.endsWith('/workflow') | ||||
| const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true' | const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true' |