feat: make SingleChatCreate customizable

Author: pt-tsl

packages/components/modules/messages/web/SingleChatRoomCreate/ChatRoomListItem/types.ts packages/components/modules/messages/web/SingleChatCreate/ChatRoomListItem/types.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { FC } from 'react'
+
+import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons'
+import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
+
+import { Box, Typography } from '@mui/material'
+
+import { HeaderContainer } from './styled'
+
+const Header: FC<{ onHeaderClick: () => void }> = ({ onHeaderClick }) => (
+  <HeaderContainer>
+    <Box
+      display="grid"
+      width="100%"
+      gridTemplateColumns="24px auto 24px"
+      gap={1.5}
+      alignItems="center"
+    >
+      <IconButton
+        aria-label="return to existing chat rooms"
+        onClick={onHeaderClick}
+        sx={{ maxWidth: 'fit-content' }}
+      >
+        <Iconify icon="eva:arrow-ios-back-fill" width={24} />
+      </IconButton>
+      <Typography component="span" variant="subtitle2" sx={{ textAlign: 'center' }}>
+        New Chat
+      </Typography>
+      <div />
+    </Box>
+  </HeaderContainer>
+)
+
+export default Header

packages/components/modules/messages/web/SingleChatCreate/Header/index.tsx

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react'
+
+import { Box, BoxProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const HeaderContainer: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({
+  borderBottom: `1px ${theme.palette.divider} solid`,
+  width: '100%',
+  padding: `${theme.spacing(2)}`,
+  [theme.breakpoints.down('sm')]: {
+    padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  },
+}))

packages/components/modules/messages/web/SingleChatCreate/Header/styled.tsx

@@ -0,0 +1,3 @@
+export interface HeaderProps {
+  onHeaderClick: () => void
+}