Skip to content

Create Reusable OrganizationCard Component for Community Pages #137

Description

@peterlipt

Description:
Extract and build the complex organization card UI into a standalone, reusable OrganizationCard component. This component will be utilized across multiple pages in the "Közélet" (Community) section, such as Specialized Colleges (Szakkollégiumok), Competitive Teams (Versenycsapatok), and Student Clubs (Öntevékeny körök), as they share the exact same structural design patterns.

Crucial Requirement: The component must be "smart" and handle optional data gracefully. Some cards (like Student Clubs) will not have "Stats" (founded year, members), "Events", or "Departments" sections. If these data points are missing, the component should simply not render those specific sections, adapting its layout automatically.

Tasks / Acceptance Criteria:

  • Component Structure: Create an OrganizationCard React component that accepts props for all necessary data points: name, stats (founded year, members, faculties), presentation text, events, activities, departments, target audience, social links, gallery images, and a join URL/text.
  • Conditional Rendering: Ensure the component checks for the existence of data (e.g., stats, events, departments) and only renders the corresponding UI sections if the data is provided.
  • UI Implementation: Build the complex layout matching the Figma design:
    • Header section with name and (optional) sub-stats.
    • "BEMUTATÁS" (Presentation) rich text block.
    • (Optional) "KIEMELT ESEMÉNYEK" (Events) grid layout.
    • "TEVÉKENYSÉGEK" (Activities) horizontal list with dot separators.
    • (Optional) "TAGOZATOK" (Departments) rounded pill list.
    • "KINEK AJÁNLJUK?" (Target Audience) text block.
    • "ELÉRHETŐSÉGEK" (Contacts) icon row (Globe, Facebook, Insta, etc.).
    • "GALÉRIA" (Gallery) scrollable/carousel component.
    • "Csatlakozom!" (Join) call-to-action banner at the very bottom (with customizable text).
  • Responsive Design: Ensure the complex grid structures reflow properly on mobile devices (e.g., changing horizontal lists to vertical stacks, adapting the gallery carousel).

Figma Reference: https://www.figma.com/design/9s51oe0aEAUczAJIObC1I0/EHK?node-id=433-1109&t=RUK5VLeFOmklwbw2-0 (Example from Specialized Colleges)

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions