52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
|
|
import { useMediaQuery } from '@janhq/joi'
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import { MainViewState } from '@/constants/screens'
|
|
|
|
import { LEFT_PANEL_WIDTH } from '../LeftPanelContainer'
|
|
|
|
import { RIGHT_PANEL_WIDTH } from '../RightPanelContainer'
|
|
|
|
import {
|
|
mainViewStateAtom,
|
|
showLeftPanelAtom,
|
|
showRightPanelAtom,
|
|
} from '@/helpers/atoms/App.atom'
|
|
import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
|
|
|
|
const CenterPanelContainer = ({ children }: PropsWithChildren) => {
|
|
const reduceTransparent = useAtomValue(reduceTransparentAtom)
|
|
const matches = useMediaQuery('(max-width: 880px)')
|
|
const showLeftPanel = useAtomValue(showLeftPanelAtom)
|
|
const showRightPanel = useAtomValue(showRightPanelAtom)
|
|
const mainViewState = useAtomValue(mainViewStateAtom)
|
|
return (
|
|
<div
|
|
className={twMerge('flex h-full w-full')}
|
|
style={{
|
|
maxWidth: matches
|
|
? '100%'
|
|
: mainViewState === MainViewState.Thread
|
|
? `calc(100% - (${showRightPanel ? Number(localStorage.getItem(RIGHT_PANEL_WIDTH)) : 0}px + ${showLeftPanel ? Number(localStorage.getItem(LEFT_PANEL_WIDTH)) : 0}px))`
|
|
: '100%',
|
|
}}
|
|
>
|
|
<div
|
|
className={twMerge(
|
|
'h-full w-full overflow-hidden bg-[hsla(var(--center-panel-bg))]',
|
|
!reduceTransparent &&
|
|
'rounded-lg border border-[hsla(var(--app-border))]'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CenterPanelContainer
|