React Foundations – Components & Rendering

Your will Build a Users Card system using the provided:

• users.js

• Theme styles

• No additional data

🎯Objective

• Component structure

• Component structure

• Conditional rendering

• Image fallback logic

📂 Required Structure

src/
 ├── assets/
 │     ├── users.js
 │     ├── profile.svg
 ├── App.css
 ├── UserCard.jsx
 ├── App.jsx
 ├── index.css
 └── main.jsx

🛠 Task Steps

Create UserCard Component

• Import users

• Use .map() to render all participants

• Each participant must render <UserCard/>

• Do NOT render data directly inside App.js

Card must display:

• Profile Image

• Username

• Team

• Online Status

Bonus (Optional)

• Show total participants count

• Show online count

• Add filter: Show only online users

📤 Deliverables

Your submission must include:

• ✅ Correct .map() usage

• ✅ Correct conditional rendering

• ✅ Respecting styling rules

Use only provided theme, No external UI libraries

Style & Data BaseStart the React Task

Deadline: 28 Feb 2026 11:59 PM