openreplay/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
Delirium 38594319f0
Player improvs (#2835)
* ui: fix performance bottlenecks, split data sources in devtools panes

* ui: move xray warn

* Player ux improvements (#2834)

* Player UX improvements.

DevTools (Including multi-tab)
Actions panel (User events, Click maps, Tag Elements)

* ui: remove unused imports, remove str templ classnames

---------

Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>

---------

Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
2024-12-10 10:31:09 +01:00

40 lines
1.1 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;
}
function JumpButton(props: Props) {
const { tooltip } = props;
return (
<div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
<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;