News Article Card List - Copy this React, Tailwind Component to your project
Pls add thumnail image for list view. Add another view: Compcat. This will be a list - Only Title, Source, and Date + the action icons. Pls add 3 more cards to help get a complete look. Sidebar Design Brief Core Functionality: Responsiveness: The sidebar should adapt seamlessly to different screen sizes, ensuring optimal user experience on various devices. Collapsibility: Upon clicking the sidebar, it should collapse, displaying only the left-aligned icons and hiding the feed names or favicons. Toggle Functionality: Within each feed category and user-generated folder, implement a toggle mechanism to display the first five items. Provide "show more" and "show less" options for expanding or collapsing the list. Design Elements: Logo/Icon: Place the logo or icon prominently at the top of the sidebar, representing the brand or application. Search Box: Include a search box for efficient navigation and content discovery. Navigation Items: Dashboard: A primary navigation item for accessing the main dashboard or home screen. Read Later: A feature for saving articles or content for later reading. Add New (Highlighted): A prominent button or link for creating new content or feeds. Feed Categories: All Feeds: A category displaying a comprehensive list of all subscribed feeds, including a total feed count. Feed Names: A list of individual feed names, each with a corresponding feed count. Ensure consistent right alignment for feed counts and left alignment for feed names. My Collection: A section similar to "My Feeds" that allows users to organize and manage their own content. User-Generated Folders: Within "My Collection," provide a mechanism for creating and organizing user-generated folders. Feeds Within Folders: Each folder can contain multiple feeds, with the same toggle functionality as in the "Feed Categories" section. Settings: A navigation item leading to the application's settings page, positioned at the bottom of the sidebar.