diff --git a/apps/meteor/client/components/Page/PageBlock.tsx b/apps/meteor/client/components/Page/PageBlock.tsx new file mode 100644 index 000000000000..a2102b7a3708 --- /dev/null +++ b/apps/meteor/client/components/Page/PageBlock.tsx @@ -0,0 +1,11 @@ +import type { Box } from '@rocket.chat/fuselage'; +import type { ComponentProps } from 'react'; +import React, { forwardRef } from 'react'; + +import PageContent from './PageContent'; + +const PageBlock = forwardRef>(function PageBlock(props, ref) { + return ; +}); + +export default PageBlock; diff --git a/apps/meteor/client/components/Page/PageBlockWithBorder.tsx b/apps/meteor/client/components/Page/PageBlockWithBorder.tsx index 8176f6734bfd..2bf0fab3068f 100644 --- a/apps/meteor/client/components/Page/PageBlockWithBorder.tsx +++ b/apps/meteor/client/components/Page/PageBlockWithBorder.tsx @@ -2,21 +2,12 @@ import type { Box } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef, useContext } from 'react'; -import PageContent from './PageContent'; +import PageBlock from './PageBlock'; import PageContext from './PageContext'; const PageBlockWithBorder = forwardRef>(function PageBlockWithBorder(props, ref) { const [border] = useContext(PageContext); - return ( - - ); + return ; }); export default PageBlockWithBorder; diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx index c2642177b869..8a079903884f 100644 --- a/apps/meteor/client/components/Page/PageHeader.tsx +++ b/apps/meteor/client/components/Page/PageHeader.tsx @@ -1,57 +1,24 @@ -import { Box, IconButton } from '@rocket.chat/fuselage'; -import { useDocumentTitle } from '@rocket.chat/ui-client'; -import { useLayout } from '@rocket.chat/ui-contexts'; import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import React, { useContext } from 'react'; -import { useTranslation } from 'react-i18next'; -import { HeaderToolbar } from '../Header'; -import SidebarToggler from '../SidebarToggler'; import PageContext from './PageContext'; +import PageHeaderNoShadow from './PageHeaderNoShadow'; type PageHeaderProps = { title: ReactNode; onClickBack?: () => void; borderBlockEndColor?: string; -} & Omit, 'title'>; +} & ComponentPropsWithoutRef; -const PageHeader = ({ children = undefined, title, onClickBack, borderBlockEndColor, ...props }: PageHeaderProps) => { - const { t } = useTranslation(); +const PageHeader = ({ borderBlockEndColor, ...props }: PageHeaderProps) => { const [border] = useContext(PageContext); - const { isMobile } = useLayout(); - - useDocumentTitle(typeof title === 'string' ? title : undefined); return ( - - - {isMobile && ( - - - - )} - {onClickBack && } - - {title} - - {children} - - + /> ); }; diff --git a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx new file mode 100644 index 000000000000..51feca504834 --- /dev/null +++ b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx @@ -0,0 +1,51 @@ +import { Box, IconButton } from '@rocket.chat/fuselage'; +import { useDocumentTitle } from '@rocket.chat/ui-client'; +import { useLayout } from '@rocket.chat/ui-contexts'; +import type { ComponentPropsWithoutRef, ReactNode } from 'react'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import { HeaderToolbar } from '../Header'; +import SidebarToggler from '../SidebarToggler'; + +type PageHeaderProps = { + title: ReactNode; + onClickBack?: () => void; + borderBlockEndColor?: string; +} & Omit, 'title'>; + +const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props }: PageHeaderProps) => { + const { t } = useTranslation(); + + const { isMobile } = useLayout(); + + useDocumentTitle(typeof title === 'string' ? title : undefined); + + return ( + + + {isMobile && ( + + + + )} + {onClickBack && } + + {title} + + {children} + + + ); +}; + +export default PageHeaderNoShadow;