Styled Card - Copy this React, Mui Component to your project
🧠Context Recap: I'm building a Reddit-style comment system in React with MUI. It supports single-level replies (no nested replies to replies), and users can only edit/delete their own comments. The UI mimics Reddit’s clean, line-based reply layout with inspiration from Instagram’s “Show/Hide Replies” behavior. 🧩 I already have the basics working: main comment + reply structure, vote buttons, timestamps, avatars, reply/edit/delete for own comments, and a single “Add a Comment” box at the bottom. Now I need you to improve the code with the following fixes and features: ✅ 1. Fix the Edit Button Currently, clicking the edit button on a reply/comment is not opening the edit mode correctly. Each comment/reply should toggle into an editable TextField or TextareaAutosize only when its own edit button is clicked. Ensure local state is used per comment ID (or index) so only one comment enters edit mode at a time. ✅ 2. Animate Reply Appearance + “Show/Hide Replies” Toggle Use MUI’s Collapse or Fade animation to animate replies appearing under a comment. By default, show only the top reply (if replies exist) with a “Show more replies (n)” button like Instagram. On click: Expand and show all replies (with animation). Button label should toggle to “Hide replies”. Show/hide should affect only that specific comment’s reply thread. ✅ 3. Fix Add Reply Affecting “Add a Comment” When replying to a comment, the input box for the reply should not interfere with the main “Add a comment” box at the bottom. Currently, they share the same state. Refactor: Separate state for replyInputs (e.g., { [commentId]: 'reply text' }) and one for newComment at the bottom. Ensure replying to one comment does not wipe or sync with the main comment input. 🧼 Optional Clean-up & Notes: Use Collapse or Fade from MUI for animations. Keep the UI clean: no boxes, just vertical lines for replies. Use Divider or Box sx={{ borderLeft: '2px solid #eee', pl: 2 }} to indent replies. Ensure responsive design looks clean on both desktop and mobile.
