H O a Dashboard - Copy this React, Tailwind Component to your project

Sure! Here's a detailed prompt you can use in PureCode AI to create a social networking style HOA dashboard with the features you requested: **Prompt:** Create a React component called `HOADashboard` for an HOA (Homeowners Association) platform that mimics a social networking site. The dashboard should feature: 1. **Sidebar Navigation**: Include icons for **Home**, **Profile**, **Community**, **Messages**, **Notifications**, and **Logout**. Use `FaHome`, `FaUser`, `FaUsers`, `FaComments`, `FaBell`, and `FaSignOutAlt` from `react icons/fa` for the navigation. The sidebar should be collapsible on smaller screens. 2. **Main Feed**: Display a list of **community posts** from users (dummy data). Each post should include the **user's name**, **post content**, and **timestamp**. Posts should be styled like social media posts, with the user’s avatar on the left and content on the right. Add simple animation using `framer motion` for each post to fade in or slide in when they appear. 3. **Post Creation Form**: At the top of the feed, add a **text box** for users to **create a new post**. Use a `textarea` for the post content. Include a **submit button** (`FaPlus`) for adding the post to the feed. When a user submits a post, it should appear at the top of the feed. 4. **Chat Feature**: Include a **chat button** in the sidebar to access a community chat (basic chat room functionality with a text input and message display). 5. **Notifications**: In the sidebar, add a **notification icon** (`FaBell`) that shows a red badge with the number of unread notifications. Clicking on notifications will display a dropdown list of recent notifications (use dummy data for now). 6. **Profile Section**: Clicking the **Profile** button in the sidebar should display the user's profile details (dummy data). The user should be able to **edit their profile** (e.g., update their name, bio, etc.). 7. **Responsive Design**: Ensure the dashboard is responsive. On smaller screens, the sidebar should be collapsible, and the feed should adjust to full screen. 8. **Logout Functionality**: The **Logout button** in the sidebar should call an `onLogout` function that redirects the user to a login page or clears the session. Use **Tailwind CSS** for styling. Ensure the UI is modern, with animations for button clicks, feed updates, and sidebar interactions. ### Example structure: **HOADashboard** (Main component) **Sidebar** (with icons for navigation) **Main Content**: **Post Creation Form** (Text area and submit button) **Feed** (Display posts) **Profile Section** (Editable user details) **Notifications** (Dropdown with recent notifications) **Chat Feature** (Community chat box) You can add more functionalities later as needed, but this should give you a solid starting point for building the social networking HOA dashboard.