Create a ui for a chat. On the center pane message bubbles, the contact name and photo. On the left pane a list on contacts on the left. Each contact has photo, the name, the last message sent, if it was read using double check mark or just sent with one check mark, the amount of messages unread in a circle. On the right pane the information of the person like demographic data and contact data.
I'll create a UI for a chat application with the specifications you've described. We'll use React with Next.js and shadcn/ui components to build this interface. Let's break it down into components and create the layout you've requested.
This code creates a chat UI with the following features:
The UI is responsive and uses shadcn/ui components along with Tailwind CSS for styling. The layout is divided into three main sections as requested, and each section is implemented as a separate component for better organization and maintainability.
To use this UI, you would need to replace the mock data with real data from your backend, implement state management (e.g., using React's useState and useContext or a state management library like Redux), and add functionality for sending and receiving messages.