overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx
Alf Eaton e61eb1b220 Merge pull request #20008 from overleaf/ae-review-panel-empty-state
Improve calculations of empty state, mini state and sizes variables in review panel

GitOrigin-RevId: 41bcb3b67c9f0019c11b4de0e4590b0407e04e66
2024-08-22 14:01:16 +00:00

40 lines
1.4 KiB
TypeScript

import { FC, memo, useState } from 'react'
import { ReviewPanelResolvedThreadsButton } from './review-panel-resolved-threads-button'
import { ReviewPanelTrackChangesMenu } from './review-panel-track-changes-menu'
import ReviewPanelTrackChangesMenuButton from './review-panel-track-changes-menu-button'
import { Button } from 'react-bootstrap'
import MaterialIcon from '@/shared/components/material-icon'
import { useLayoutContext } from '@/shared/context/layout-context'
const ReviewPanelHeader: FC = () => {
const [trackChangesMenuExpanded, setTrackChangesMenuExpanded] =
useState(false)
const { setReviewPanelOpen } = useLayoutContext()
return (
<div className="review-panel-header">
<div className="review-panel-heading">
<div className="review-panel-label">Review</div>
<Button
bsStyle={null}
className="review-panel-close-button"
type="button"
onClick={() => setReviewPanelOpen(false)}
>
<MaterialIcon type="close" />
</Button>
</div>
<div className="review-panel-tools">
<ReviewPanelResolvedThreadsButton />
<ReviewPanelTrackChangesMenuButton
menuExpanded={trackChangesMenuExpanded}
setMenuExpanded={setTrackChangesMenuExpanded}
/>
</div>
{trackChangesMenuExpanded && <ReviewPanelTrackChangesMenu />}
</div>
)
}
export default memo(ReviewPanelHeader)