overleaf/services/web/frontend/js/features/outline/components/outline-item-toggle-button.tsx
Rebeka Dekany 39b6b8baed Merge pull request #20172 from overleaf/rd-ide-fileoutline
[web] Migrate the file outline styling from LESS to SCSS

GitOrigin-RevId: 5e485b13a7358e5dcab2c75ee7d36a07e1401e26
2024-09-04 08:05:12 +00:00

24 lines
774 B
TypeScript

import { memo, type Dispatch, type SetStateAction } from 'react'
import { useTranslation } from 'react-i18next'
import MaterialIcon from '@/shared/components/material-icon'
export const OutlineItemToggleButton = memo<{
expanded: boolean
setExpanded: Dispatch<SetStateAction<boolean>>
}>(({ expanded, setExpanded }) => {
const { t } = useTranslation()
return (
<button
className="outline-item-expand-collapse-btn"
onClick={() => setExpanded(value => !value)}
aria-label={expanded ? t('collapse') : t('expand')}
>
<MaterialIcon
type={expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}
className="outline-caret-icon"
/>
</button>
)
})
OutlineItemToggleButton.displayName = 'OutlineItemToggleButton'