Channels - Copy this React, Tailwind Component to your project

Build a responsive community platform for discussing the Constitution of India, where users can interact, post messages, and engage in discussions across different topics. The platform should follow these design and functionality principles: Design & Layout: Left Sidebar Channels: The left sidebar should contain a list of discussion channels (e.g., Fundamental Rights, Education Rights, etc.). The sidebar should be styled as a vertical navigation menu with soft rounded rectangles for each channel. Each channel should have hover effects with animations like subtle background changes or a sliding underline when hovered or clicked. The active channel should be highlighted with a distinct color or shadow effect. Channels can include: Fundamental Rights Education Rights Freedom of Speech Common Discussion Main Chat Area: The main area on the right will display the current discussion for the selected channel. The main chat area should have a clean and modern design with a header that displays the current channel name. Messages should appear in a message bubble format, and the latest messages should automatically scroll into view. Message Input: Below the chat area, there will be an input field where users can type messages. When the user hits Send, the message should be temporarily stored in an array (simulating adding it to the chat), and an animation (e.g., fade in or slide up) should show the new message in the chat window. Add a default placeholder text like Enter your message.... Include a Send button with an animation that changes its style (color, scale, or shadow) on hover. Animations & Transitions: Channel Switching Animation: When switching between channels, use a smooth transition animation (e.g., fade out and fade in or a sliding effect) to load the new channel’s messages. The transition should be visually engaging yet smooth, providing users with feedback that they’ve switched channels. Message Posting Animation: When a new message is posted, it should animate into view with a slight delay for visibility (e.g., slide in from bottom or fade in). Use animations like bouncing or scaling effects for visual interest. Responsiveness: Mobile and Tablet Layouts: On mobile devices, the sidebar should collapse into a hamburger menu at the top, allowing users to select different channels easily without taking up too much screen space. The chat area and message input should adjust to smaller screen sizes with larger, more touch friendly buttons and input fields. Ensure that the chat bubbles and text are easily readable on mobile, tablet, and desktop screens. Laptop and Desktop Layouts: On larger screens, the sidebar should remain visible on the left, while the chat area takes up the rest of the space. The input field and send button should be appropriately sized, with a focus on usability and interaction. Component Breakdown: Sidebar Component: Contains a list of channel names. Each channel is clickable, and clicking will switch the current active channel with a smooth animation. Chat Window Component: Displays an array of default messages when the user first enters a channel. After posting, the messages will get temporarily added to the array and displayed in the chat window with an animation. Message Input Component: Includes an input field for typing messages and a send button. When the user submits a message, it gets added to the temporary message array, and the content gets re rendered to include the new message. Code Requirements: Use React for the UI. Use a CSS framework like TailwindCSS or Styled Components for styling and responsiveness. Use an animation library like Framer Motion or CSS animations for the transitions. Store messages in a temporary array (local state) to simulate message posting. Implement the sidebar channel navigation logic, and update the chat content dynamically based on the active channel. the community should be responsive for mobile,tablet and desktop devices use theme like whatsapp community