Enhanced Component - Copy this React, Tailwind Component to your project
Design a modern and user friendly interface with a focus on clean lines, intuitive navigation, and a visually appealing layout. The page should be divided into three main sections: the left panel for file thumbnails, the middle section for viewing the selected image, and the right panel for detailed interaction via tabs. Left Panel: On the left side, create a collapsible and expandable panel that displays a list of file names accompanied by thumbnails. Style this panel with a subtle background color, such as light gray, to differentiate it from the rest of the page. Each file entry should be presented in a card like format, with the thumbnail on the left and the file name to its right. Ensure the text is clear and readable, and apply a slight hover effect, such as a light shadow or background color change, to indicate interactivity. Include a small icon or button at the top of this panel for collapsing or expanding the section, with smooth slide in and slide out animations. Middle Section: In the center of the page, provide a large area dedicated to displaying the selected image. This section should be visually distinct with a clean, neutral background—either white or very light gray—to ensure the focus remains on the image. When no image is selected, show a placeholder that reads "No image selected," along with a minimalistic placeholder icon, such as a crossed out image or a simple box. Above the image area, place two buttons: "Upload Image" and "Delete Image." These buttons should be prominent but not overly bright, styled in a muted color like soft blue or green. The buttons should have rounded corners and a subtle hover effect, such as a slight color change or shadow. Position these buttons in the top right corner of the image area for easy access, and ensure they remain visible but unobtrusive when an image is displayed. Right Panel: On the right side, create another collapsible and expandable panel containing three tabs: "Analytics Result," "Review," and "Modify." The panel should have a slightly darker background than the middle section to distinguish it, but still align with the overall color scheme of the page. The tabs should be clearly labeled and easy to switch between, with a modern, flat design. The active tab should be highlighted with a subtle accent color, such as a muted blue or green, and a slight underline or border to indicate selection. The content within each tab should be well organized and easy to navigate. The "Analytics Result" tab might display data or graphs related to the selected image, the "Review" tab could contain text fields or comments, and the "Modify" tab might offer basic editing tools or options. Ensure each tab has a consistent layout, with sufficient padding and spacing to avoid clutter. Add an icon or button at the top of this panel to collapse or expand the section, with smooth animations that mirror the left panel. Both the left and right panels should be fully responsive, collapsing into a hidden menu or sliding out from the sides on smaller screens to maximize the central image viewing area. Overall Layout: Maintain a consistent, modern design throughout the page with a cohesive color palette of muted tones—such as soft blues, greens, and grays. Use sans serif fonts for clean readability, and apply subtle hover effects, shadows, and animations to enhance the user experience without overwhelming the interface. Ensure the layout is fully responsive, with each panel and section adjusting smoothly to different screen sizes, providing an optimal experience on both desktop and mobile devices.
