Post Viewer - Copy this React, Tailwind Component to your project
Design-a-modern-and-minimalistic-post-viewing-interface-for-a-social-media-platform-with-a-two-sided-menu-system.-The-interface-should-allow-users-to-view-one-post-at-a-time-while-offering-collapsible-menus-on-both-the-left-and-right-sides-for-enhanced-navigation-and-interaction.-Layout-Features:-Post-Display:-Each-post-should-be-displayed-centered-on-the-screen-with:-Author's-avatar-and-name-at-the-top,-clickable-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,-Bookmark,-and-Follow-Author.-Display-likes,-comments,-and-shares-counters-directly-below-the-buttons.-Navigation:-Users-can-navigate-between-posts-using:-Swipe-gestures-(on-mobile)-or-arrow-keys-(on-desktop).-Up-and-down-buttons-for-quick-navigation.-Floating-"Home"-button-to-return-to-the-main-feed.-Left-Sidebar:-A-collapsible-left-menu-with:-Categories-or-topics-(e.g.,-Trending,-Technology,-News).-Filters-(e.g.,-Posts,-Videos,-Images).-Quick-links-to-personal-collections-or-saved-posts.-Include-hover-animations-or-subtle-slide-effects-for-menu-interactions.-Right-Sidebar:-A-collapsible-right-menu-for:-Comments-section:-Display-threaded-comments-for-the-current-post.-Related-posts-or-"More-from-this-author."-Notifications-or-user-mentions-related-to-the-current-post.-Ensure-smooth-transitions-for-opening-and-closing-the-menu.-Responsive-Design:-On-mobile:-Replace-side-menus-with-bottom-drawers-or-floating-menus-for-easy-access.-Simplify-navigation-buttons-to-swipe-gestures-and-minimal-icons.-Style-&-Colors:-Theme:-Dark-mode-with-a-sleek,-professional-design.-Use-subtle-gradients-for-background-effects.-Primary-Colors-(Dark-Mode):-Background:-#1A1A1A-(dark-gray).-Card-Background:-#2B2B2B-(medium-gray).-Text:-#E5E5E5-(light-gray).-Accent:-#1DA1F2-(blue-for-links,-highlights,-and-interactive-elements).-Borders:-#333333-(subtle-gray).-Typography:-Use-modern,-sans-serif-fonts-like-Inter,-Roboto,-or-Poppins.-Emphasize-the-post-content-with-larger-font-sizes-for-body-and-title-text.-Interactive-Effects:-Hover-Effects:-Add-light-glows-or-subtle-color-changes-on-interactive-elements.-Transitions:-Smooth-animations-for-toggling-menus-and-navigating-between-posts.-Interactive-Features:-Add-a-reaction-bar-with-emojis-for-users-to-express-emotions-(e.g.,-👍,-❤️,-😂).-Include-a-progress-indicator-to-show-the-user's-position-in-the-post-feed.-Allow-users-to-pin-posts-to-their-profile-or-bookmark-them-for-later.-Sidebar-Details:-Left-Sidebar-Features:-Categories:-Trending,-Popular,-Recently-Viewed.-Tags/Topics:-Customizable-tags-(e.g.,-#AI,-#WebDev,-#UXDesign).-User's-Collections:-Saved-posts-or-favorite-topics.-Right-Sidebar-Features:-Comments-Section:-Nested-threaded-comments-with-an-option-to-reply-directly.-Related-Posts:-Show-similar-posts-based-on-tags-or-the-author.-Notifications:-Display-user-mentions-or-recent-activity.-Additional-Features:-Allow-users-to-toggle-menus-via-hamburger-icons-on-both-sides.-Add-infinite-scrolling-to-the-feed-for-seamless-content-discovery.-Ensure-sidebars-collapse-automatically-when-not-in-use-to-maximize-the-main-post-viewing-area.-Focus-on-making-the-interface-intuitive-and-interactive-while-keeping-the-design-clean-and-minimalistic.-Prioritize-user-engagement-with-hover-effects,-responsive-navigation,-and-seamless-post-exploration.
