Issue 21 Add Room Card Component

[loklokyx]

Change Summary

Add Room card component with user, admin, and mobile views.

Change Form

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests (NA)
• The change has documentation

Other Information

Screenshots

Can be viewed here

Booking Rooms View

Screen.Recording.2025-12-08.142510.mp4

Admin Rooms View

Screen.Recording.2025-12-08.143209.mp4

General Rooms View

Screen.Recording.2025-12-08.142317.mp4

Related issue

• Resolve Add Room card component #21

[rozza368]

All functionality is working well for me and the cards are responsive to resizing.

I would suggest using variables for the colour codes.

[loklokyx]

@rozza368 thanks for reviewing. As of now, I'm following the colors provided in the Figma design. I can refactor them into variables as well if needed.

[loklokyx]

I've updated the components to use the closest matching colour names from the Bloom theme styling.

[Fozzyack]

Just had a quick check - looks good so far. Though I am not sure if the design is supposed to change based on if the card is on mobile or not. Will have to check with Erica.

[loklokyx]

Hii @Fozzyack thanks for checking. Yes, this can be done easily in future by using a custom hook like useIsMobile(). For example, you can refer to an approach shown here.

Based on condition, we can use the MobileCard / UserCard components. I split the cards into separate components because the designs are quite different, so keeping them independent makes the structure clearer and easier to manage.

[ErikaKK]

It's great to have the hideIcon?: boolean props, and the icon map. need a few changes, and add another room card for general use (can name it RoomCard)