This project is a responsive chat application built using React and Chakra UI. It features a layout that includes a sidebar with a list of chats and a main content area for chat details.
- Utilizes Chakra UI's responsive design utilities to ensure the app works well on both mobile and desktop devices.
- A left sidebar contains a list of chats that can be scrolled without affecting the main content area.
- Each chat item includes an avatar, username, a preview of the last message, and the timestamp of the last message.
- Chat items change background color when selected, indicating the active chat.
- Click events are handled to update the selected chat item.
- A search input is provided in the sidebar for filtering chats.
- A drawer is used for additional functionalities like creating an account.
- Conditional styles are applied to support both light and dark modes.
Uses Flex
, VStack
, and HStack
for structuring the layout.