Add copilot-my-component with Future Star Wars Planets list

[Copilot]

This PR adds a new prototype Angular component named copilot-my-component that displays a list of Future Star Wars planets.

Changes

• Generated new component using Angular CLI (ng generate component copilot-my-component)

  • Created component TypeScript file with proper decorator configuration
  • Created component HTML template
  • Created component CSS file (empty, following existing pattern)

• Integrated component into app

  • Added <app-copilot-my-component> selector to app.html below the existing <app-sw-planet-films> component
  • Imported CopilotMyComponent into app.ts and added it to the component's imports array

• Customized component content

  • Replaced default placeholder text with an <h1> heading: "Future Star Wars Planets"
  • Added a <ul> list featuring 5 planets: Coruscant, Mandalore, Naboo, Kamino, and Mustafar
  • This provides a preview of potential future enhancements where this list could be dynamically populated

Screenshot

The new component renders correctly below the existing SW Planets with Film Counts component, displaying the hardcoded planet list as specified in the requirements.

Verification

• ✅ Code formatting passes (Prettier check)
• ✅ Build completes successfully with no errors
• ✅ Component renders correctly in development mode
• ✅ No security vulnerabilities detected (CodeQL scan)

This component serves as a prototype that could be expanded in future iterations to fetch and display dynamic planet data.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a new prototype component...</issue_title>
<issue_description>Create a new branch for your work, name it something like copilot/my-component

If you are doing this today, create your branch from master after I have accepted our sw-planet-films PR into master

If you are doing this in future, create your branch from week-08-sharing-start/master since master may change a lot-lot as we progress through the class

Remember ng generate component copilot-my-component

Probably diary commit

Edit app.html to add your component below <app-sw-planet-films></app-sw-planet-films>, your component selector is likely something like <app-copilot-my-component></app-copilot-my-component>

Probably have to import it into app.ts and add it to the imports array in the component decorator...

Save and see it work, should see copilot-my-component works below our planet with film count list, and then review your changes and make a diary commit : - )

Edit your component HTML E.g. copilot-my-component.html and hardcode something in there other than the <p></p> , maybe an <h1> and some <ul> of some planet list you might build in future... Or anything really for this week's sharing

Save, view, review, diary commit ! ! !

Make your PR...</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #9

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.