OfflineHQ / marketplace

https://offline.live/
GNU General Public License v3.0
0 stars 0 forks source link

DCA-6: Develop Frontend Components to Display Content Spaces #242

Open sebpalluel opened 10 months ago

sebpalluel commented 10 months ago

DCA-6: Develop Frontend Components to Display Content Spaces

Description

Develop frontend components to display Content Spaces on the route /organizer/{organizer-slug}/content-space/{content-space-slug}. This includes fetching Content Space data, implementing conditional rendering, and ensuring access control. The content is to be displayed in a carousel format, with appropriate indications for exclusive EventPass access.

Tasks

  1. Route and Data Fetching:
    • Implement the route for individual Content Spaces.
    • Fetch Content Space data from Hygraph if it is in a PUBLISHED state.
  2. Conditional Rendering:
    • Render the Content Space if PUBLISHED; otherwise, display a 404 Not Found page.
  3. Content Display in Carousel Format:
    • Develop a carousel component to display images and videos.
  4. Access Control Indication:
    • Show a message or visual indication for exclusive EventPass access.
    • Display a locked section for users without appropriate access.

Acceptance Criteria

  1. Correct Route Implementation: The Content Space is accessible via the specified route, adhering to the format /organizer/{organizer-slug}/content-space/{content-space-slug}.
  2. Data Fetching and Conditional Rendering: The Content Space data is accurately fetched from Hygraph. The Content Space is displayed only if it is in a PUBLISHED state; otherwise, a 404 Not Found page is shown.
  3. Carousel Component: The carousel for displaying content is user-friendly, responsive, and correctly renders both pictures and videos.
  4. Access Control and UI Indications: There are clear UI elements indicating whether the content is accessible or locked, based on the user's EventPass ownership.
  5. Responsive and Accessible Design: The entire interface, including the carousel and access control indications, is responsive and provides a seamless user experience across different devices.

Notes