Post View - Copy this React, Tailwind Component to your project
Design a modern and minimalistic post viewing interface for a social media platform. The design should allow users to view and interact with one post at a time while easily navigating to the next or previous post. Layout Features: Post Display: Each post should be displayed centered on the screen with: Author's avatar and name at the top, with clickable options to view their profile. A timestamp showing when the post was published. The main post content (text, images, or videos) prominently displayed. Interaction buttons below the content, including: Like, Comment, Share, and Bookmark. The number of likes, comments, and shares visible under the interaction buttons. Navigation: Users can navigate between posts using: Swipe gestures (on mobile) or arrow keys (on desktop). Up and down buttons for quick navigation between posts. Include a floating "Home" button to return to the main feed. Interactive Features: Add hover effects for desktop, such as highlighting the Like button on hover. For images or videos, include a zoom in option or play button overlay for interactive media. Allow users to expand comments or view the full thread without leaving the post view. Sidebar or Floating Actions: Add a collapsible sidebar or floating menu for: Quick access to trending hashtags or topics. Notifications about new posts or interactions. A floating post creation button for users to create new content. Style & Colors: Theme: Focus on a dark mode aesthetic for a sleek, modern look. Use subtle gradients and shadows for card elevation and hover effects. Primary Colors (Dark Mode): Background: #1A1A1A (dark gray). Text: #E5E5E5 (light gray). Accent: #1DA1F2 (blue for links and buttons). Secondary Elements: #333333 (slightly lighter gray for card backgrounds). Typography: Use clean, bold sans serif fonts like Inter, Roboto, or Poppins. Emphasize the post content with larger font sizes for titles and body text. Interactive Effects: Hover states: Highlight buttons and interaction counters (e.g., glow or color change). Transitions: Smooth animations when navigating between posts. Additional Features: Add a reaction bar with emojis for users to express different emotions (e.g., 👍, ❤️, 😂). Include a progress indicator or scroll bar to show how far the user has scrolled through posts. Allow users to pin important posts to their profile for quick access. Add a toggle for light and dark modes. Focus on making the design intuitive, visually engaging, and optimized for both desktop and mobile devices. Ensure the layout encourages users to interact with posts and seamlessly move to the next one.
