Files
overleaf-cep/services/web/frontend/js/features/ide-redesign/components/rail-panel-header.tsx
T
Rebeka Dekany 7c97cbbfe4 Improve landmarks on the Project dashboard and Editor pages (#27401)
* Improve landmarks for the Project Dasbhboard

* Improve landmarks for the IDE page

* Improve landmarks for the new redesigned IDE page

* Sort locales

* Fix typo OlButtonToolbar -> OLButtonToolbar

* Update project navbar translation

* Update labels

* Redundant main landmark

* Fix failing test

* Descriptive name for the rails tab

* Header should not be in a button

* Update translation to Account and help

* Update translation to Project categories and tags

* Add explanations

* Show landmark for the survey widget when it's rendered

* Suggestions for nav stretch/scroll/borders

* Source format

---------

Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com>
GitOrigin-RevId: d05a738e782d2edb229529aadf92b9004dfd973a
2025-07-29 08:05:16 +00:00

39 lines
1.0 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import { useRailContext } from '../contexts/rail-context'
import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
import React from 'react'
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
export default function RailPanelHeader({
title,
actions,
}: {
title: string
actions?: React.ReactNode[]
}) {
const { t } = useTranslation()
const { handlePaneCollapse } = useRailContext()
return (
<div className="rail-panel-header">
<h4 className="rail-panel-title">{title}</h4>
<div className="rail-panel-header-actions">
{actions}
<OLTooltip
id="close-rail-panel"
description={t('close')}
overlayProps={{ placement: 'bottom' }}
>
<OLIconButton
onClick={handlePaneCollapse}
className="rail-panel-header-button-subdued"
icon="close"
accessibilityLabel={t('close')}
size="sm"
/>
</OLTooltip>
</div>
</div>
)
}