import { Viewer } from '@react-pdf-viewer/core';
import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/page-navigation/lib/styles/index.css';
const pageNavigationPluginInstance = pageNavigationPlugin();
const { CurrentPageInput, GoToFirstPageButton, GoToLastPageButton, GoToNextPageButton, GoToPreviousPage } =
pageNavigationPluginInstance;
return (
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#eeeeee',
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
display: 'flex',
justifyContent: 'center',
padding: '4px',
}}
>
<div style={{ padding: '0px 2px' }}>
<GoToFirstPageButton />
</div>
<div style={{ padding: '0px 2px' }}>
<GoToPreviousPage />
</div>
<div style={{ padding: '0px 2px' }}>
<CurrentPageInput />
</div>
<div style={{ padding: '0px 2px' }}>
<GoToNextPageButton />
</div>
<div style={{ padding: '0px 2px' }}>
<GoToLastPageButton />
</div>
</div>
<div
style={{
flex: 1,
overflow: 'hidden',
}}
>
<Viewer fileUrl="/assets/pdf-open-parameters.pdf" plugins={[pageNavigationPluginInstance]} />
</div>
</div>
);