Chakra UI Chat - Horizon UI

function ChatHeader(props) {    
  return (
    <Box>
      <Flex
        cursor='pointer'
        pt='26px'
        pb={"26px"}
        justifyContent='center'
        w='100%' >
        <Avatar
          h={{ base: "30px", "2xl": "50px" }}
          w={{ base: "30px", "2xl": "50px" }}
          src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80"
          me='16px'
        />
        <Flex direction='column' align='start' me='auto'>
          <Text
            color={useColorModeValue("secondaryGray.900", "white")}
            fontSize={{ base: "lg", "2xl": "lg" }}
            me='6px'
            fontWeight='700'>
             Roberto Michael
          </Text>
          <Text
            display={{ base: "none", xl: "unset" }}
            color={useColorModeValue("secondaryGray.900", "white")}
            fontSize={{ base: "md", "2xl": "md" }}
            fontWeight='400'>
            Hi there, How are you? All good?
          </Text>
          <Text
            display={{ base: "unset", xl: "none" }}
            color={useColorModeValue("secondaryGray.900", "white")}
            fontSize={{ base: "md", "2xl": "md" }}
            fontWeight='400'>
            Hi there, How are yo...
          </Text>
        </Flex>
        <Text
          color='secondaryGray.600'
          fontSize={{ base: "md", "2xl": "md" }}
          fontWeight='500'>
          09:00 PM
        </Text>
      </Flex>
      {/* <Flex
        h="1px"
        w="100%"
        display={ "flex"}
        bg={useColorModeValue("secondaryGray.400", "whiteAlpha.100")} 
        mb="20px"
      ></Flex>  */}
    </Box>
  );
}

import ChatHeader from "components/chat/ChatHeader"

<ChatHeader
  name='Roberto Michael'
  lastMessage='Hi there, How are you? All good?' 
  avatar={avatar2}
  hour='09:00 PM'
/>

<Table variant="simple"> 
  <Thead>
    <Tr>
      <Th>Prop</Th>
      <Th>Role</Th>
      <Th>Values</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>lastMessage</Td>
      <Td>Displays the last messages's text</Td>
      <Td>String</Td>
    </Tr>
    <Tr>
      <Td>avatar</Td>
      <Td>Displays the avatar of the person</Td>
      <Td>String</Td>
    </Tr>
    <Tr>
      <Td>name</Td>
      <Td>Displays the persons name</Td>
      <Td>String</Td>
    </Tr>
    <Tr>
      <Td>hour</Td>
      <Td>Displays last message's sending hour</Td>
      <Td>String</Td>
    </Tr>
    <Tr>
      <Td>last</Td>
      <Td>If true, the line at the bottom of the component is removed</Td>
      <Td>Boolean</Td>
    </Tr>
  </Tbody> 
</Table>

function ChatHeader(props) {    
  return (
   <Box
      borderRadius={ "20px 0px 20px 20px" }
      bg={useColorModeValue("brand.500", "brand.400")}
      justifyContent='center'
      alignItems='center'
      px='24px'
      py='16px'
      w='max-content'
      maxW={{ base: "100%", lg: "65%", xl: "52%" }}
      mb={ { base: "20px" }} >
      <Text
        color={ "white"}
        fontSize={{ base: "md", "2xl": "md" }}
        me='6px'
        mb='8px'
        fontWeight='400'> 
      <span>
        OMG!! It’s so innovative and awesome! I think I am going to buy it for my
        projects! It’s a game changer!!🔥
      </span>
      </Text>
      <Flex>
        <Flex align="center" justify="center" me="4px"> 
          <svg
            stroke='#ffffff'
            fill='#ffffff'
            stroke-width='0'
            viewBox='0 0 24 24'
            focusable='false'
            class='chakra-icon css-7sc0hn'
            height='1em'
            width='1em'
            xmlns='http://www.w3.org/2000/svg'>
            <path fill='none' d='M0 0h24v24H0z' />
            <path d='M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z' />
          </svg>
        </Flex>
        <Text
          color={ "white"}
          fontSize={{ base: "xs", "2xl": "md" }}
          fontWeight='500'>
          09:25 PM  
        </Text>
      </Flex>
    </Box> 
);
}

import MessageBlock from "components/chat/MessageBlock"

<MessageBlock
    isLast
    seen
    content={
      <span>
        OMG!! It’s so innovative and awesome! I think I am going to buy it for my
        projects! It’s a game changer!!🔥
      </span>
    }
    time='09:25 PM'
  />

<Table variant="simple"> 
  <Thead>
    <Tr>
      <Th>Prop</Th>
      <Th>Role</Th>
      <Th>Values</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>content</Td>
      <Td>Displays the messages's content</Td>
      <Td>Any</Td>
    </Tr>
    <Tr>
      <Td>seen</Td>
      <Td>Displays a "seen" icon</Td>
      <Td>Boolean</Td>
    </Tr>
    <Tr>
      <Td>side</Td>
      <Td>Changes the side and the color of the block depending on who sent the message</Td>
      <Td>"left" or "right"</Td>
    </Tr>
    <Tr>
      <Td>time</Td>
      <Td>Displays message's sending hour</Td>
      <Td>String</Td>
    </Tr>
    <Tr>
      <Td>isLast</Td>
      <Td>If true, the padding at the bottom of the component is removed</Td>
      <Td>Boolean</Td>
    </Tr>
  </Tbody> 
</Table>