44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Tooltip } from 'UI';
|
|
import { CaretRightOutlined } from '@ant-design/icons';
|
|
import { Button } from 'antd';
|
|
import { shortDurationFromMs } from 'App/date';
|
|
|
|
interface Props {
|
|
onClick: any;
|
|
time?: number;
|
|
tooltip?: string;
|
|
extra?: React.ReactNode;
|
|
}
|
|
function JumpButton(props: Props) {
|
|
const { tooltip } = props;
|
|
return (
|
|
<div className="absolute right-2 top-0 bottom-0 my-auto flex items-center gap-2">
|
|
{props.extra ? (
|
|
<div className={'hidden group-hover:block'}>{props.extra}</div>
|
|
) : null}
|
|
<Tooltip title={tooltip} disabled={!tooltip}>
|
|
<Button
|
|
type="default"
|
|
size="small"
|
|
className="hidden group-hover:flex rounded-lg text-xs p-1 py-0 gap-0 h-6"
|
|
iconPosition="end"
|
|
onClick={(e: any) => {
|
|
e.stopPropagation();
|
|
props.onClick();
|
|
}}
|
|
icon={<CaretRightOutlined />}
|
|
>
|
|
JUMP
|
|
</Button>
|
|
{props.time ? (
|
|
<div className="block group-hover:hidden mr-2 text-sm">
|
|
{shortDurationFromMs(props.time)}
|
|
</div>
|
|
) : null}
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default JumpButton;
|