mirror of
https://github.com/langgenius/dify.git
synced 2026-02-16 07:01:44 -05:00
f9f3d33911
Position the clear button relative to the right divider instead of following the tab labels, ensuring consistent positioning across different language translations. Also fix tab switching jitter by setting a fixed header height.
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type { FC, ReactNode } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { cn } from '@/utils/classnames'
|
|
import { InspectTab } from './types'
|
|
|
|
const TAB_ITEMS = [
|
|
{ value: InspectTab.Variables, labelKey: 'debug.variableInspect.tab.variables' },
|
|
{ value: InspectTab.Artifacts, labelKey: 'debug.variableInspect.tab.artifacts' },
|
|
] as const
|
|
|
|
type TabHeaderProps = {
|
|
activeTab: InspectTab
|
|
onTabChange: (tab: InspectTab) => void
|
|
children?: ReactNode
|
|
}
|
|
|
|
const TabHeader: FC<TabHeaderProps> = ({
|
|
activeTab,
|
|
onTabChange,
|
|
children,
|
|
}) => {
|
|
const { t } = useTranslation('workflow')
|
|
|
|
return (
|
|
<div className="flex h-10 w-full shrink-0 items-center gap-0.5 pl-3 pr-2">
|
|
{TAB_ITEMS.map(tab => (
|
|
<button
|
|
key={tab.value}
|
|
type="button"
|
|
onClick={() => onTabChange(tab.value)}
|
|
className={cn(
|
|
'system-sm-semibold rounded-md px-2 py-1 transition-colors',
|
|
activeTab === tab.value
|
|
? 'bg-state-base-active text-text-primary'
|
|
: 'text-text-tertiary hover:text-text-secondary',
|
|
)}
|
|
>
|
|
{t(tab.labelKey)}
|
|
</button>
|
|
))}
|
|
<div className="ml-auto">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TabHeader
|