Add News Carousel Component

[patinen]

✨ Feature Description

• What is it?: Add a reusable carousel component to the News page for displaying highlighted or topical news content. The carousel should support text content and optional images and follow the latest News page design.
• Who does it benefit?: News page visitors by making highlighted content easier to notice and browse. It also provides a reusable UI component for carousel content that will later be populated from Directus.

---

🌟 Benefits of the Feature

• User Experience: Important or topical news content can be presented prominently without taking over the normal news grid. Users can navigate between carousel items directly from the News page.
• Project Impact: Separates the carousel UI from its data source, making the component easier to maintain, test and later integrate with Directus.

---

🛠️ Proposed Implementation

• Technical Requirements:

  • Create a reusable News carousel component.
  • The component should accept carousel items as props rather than fetching data itself.
  • Each carousel item should support:
    • Text content
    • Optional image
  • Images must use conditional rendering. If an item does not contain an image, the layout should still render correctly without an empty image container or broken placeholder.
  • Include controls for navigating between carousel items.
  • Ensure the component works responsively on desktop and mobile layouts.
  • Follow existing project styling conventions and avoid adding a new carousel dependency unless necessary.

• Implementation Steps:

  1. Create the News carousel component and define the data structure expected by the component.
  2. Implement navigation between carousel items.
  3. Implement conditional image rendering.
  4. Add responsive styling based on the News page design.
  5. Add the carousel to NewsPage in the intended position.
  6. Verify the component works with multiple items and with items both with and without images.

---

📎 Additional Information

• Relevant Links:

  • News page: src/preparedPages/NewsPages/ui/NewsPage.tsx
  • News entities/API: src/entities/NewsV2/
  • Directus integration will be handled separately.

• Examples/Mockups:

  • Follow the latest News page design in Figma for carousel layout, controls and responsive behavior.