Create a different badge for unpublished CI/CD catalog resources: frontend

What does this MR do and why?

This MR continues the implementation from the !208654 (merged). It needs to be a separate change as it uses a new GraphQL field added in a previous MR.

References

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Create a project
2. Naviate to Project -> Settings -> General -> Visibility, project features, permissions
3. Check the CI/CD Catalog project to 'on'.
4. Navigate to the Admin area and select Projects.
5. Verify the badge shown for the unpublished project.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #455039 (closed)