45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { useMemo, ReactNode } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { AppPaneIcons, AppPaneId, AppPaneTitles } from './AppPaneMetadata'
|
|
import { classNames } from '@/Utils/ConcatenateClassNames'
|
|
import { useResponsiveAppPane } from './ResponsivePaneProvider'
|
|
|
|
type Props = {
|
|
children: ReactNode
|
|
contentClassName?: string
|
|
contentElementId?: string
|
|
paneId: AppPaneId
|
|
}
|
|
|
|
const ResponsivePaneContent = ({ children, contentClassName, contentElementId, paneId }: Props) => {
|
|
const { selectedPane, toggleAppPane: togglePane } = useResponsiveAppPane()
|
|
|
|
const isSelectedPane = useMemo(() => selectedPane === paneId, [paneId, selectedPane])
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className={classNames(
|
|
'flex w-full items-center justify-between border-b border-solid border-border px-4 py-2 focus:shadow-none focus:outline-none md:hidden',
|
|
isSelectedPane ? 'bg-contrast' : 'bg-default',
|
|
)}
|
|
onClick={() => togglePane(paneId)}
|
|
>
|
|
<div className="flex items-center gap-2 font-semibold">
|
|
<Icon type={AppPaneIcons[paneId]} />
|
|
<span>{AppPaneTitles[paneId]}</span>
|
|
</div>
|
|
<Icon type="chevron-down" />
|
|
</button>
|
|
<div
|
|
id={contentElementId}
|
|
className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', contentClassName)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ResponsivePaneContent
|