52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Tooltip } from 'antd';
|
|
import cn from 'classnames';
|
|
import React from 'react';
|
|
|
|
interface Props {
|
|
i: number;
|
|
tab: string;
|
|
currentTab: string;
|
|
changeTab?: (tab: string) => void;
|
|
isLive?: boolean;
|
|
isClosed?: boolean;
|
|
name?: string;
|
|
}
|
|
|
|
function Tab({ i, tab, currentTab, changeTab, isLive, isClosed, name }: Props) {
|
|
return (
|
|
<div
|
|
key={tab}
|
|
style={{
|
|
marginBottom: '-2px',
|
|
}}
|
|
onClick={() => changeTab?.(tab)}
|
|
className={cn(
|
|
'self-end py-1 px-4 text-sm',
|
|
changeTab && !isLive ? 'cursor-pointer' : 'cursor-default',
|
|
currentTab === tab
|
|
? 'border-gray-lighter border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
|
|
: 'cursor-pointer border-gray-lighter !border-b !border-t-transparent !border-l-transparent !border-r-transparent',
|
|
)}
|
|
>
|
|
<Tooltip title={name && name.length > 20 ? name : ''} mouseEnterDelay={0.5}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs">
|
|
<div>{i + 1}</div>
|
|
</div>
|
|
<div
|
|
className={cn('whitespace-nowrap', isClosed ? 'line-through' : '')}
|
|
style={{
|
|
maxWidth: 114,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{name || `Tab ${i + 1}`}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Tab;
|