Create OutputComponent for Results Display [frontend]

[salazarsebas]

🖥 Create OutputComponent for Results Display 📊

📝 Description

Develop a reusable OutputComponent to display compilation and test results or errors from the backend. This component will provide clear feedback to users, enhancing the debugging experience. By separating the output display into its own component, we maintain a modular architecture and improve code maintainability.

🎯 Objective

Create an Angular component in apps/frontend/src/app/components/output/ to display backend responses in a styled, scrollable panel.

🗂 Structure

• Directory: apps/frontend/src/app/components/output/
• Files:
  • apps/frontend/src/app/components/output/output.component.ts
  • apps/frontend/src/app/components/output/output.component.html
  • apps/frontend/src/app/components/output/output.component.css
  • apps/frontend/src/app/app.module.ts
• Expected structure:

  apps/frontend/
  ├── src/
  │   ├── app/
  │   │   ├── components/
  │   │   │   └── output/
  │   │   │       ├── output.component.ts
  │   │   │       ├── output.component.html
  │   │   │       └── output.component.css
  │   │   └── app.module.ts
  

✅ Requirements

• Generate the component with bun x ng generate component output.
• Create output.component.html with a <pre> element to display text output.
• Use an @Input() property to receive the output string from the parent component.
• Style the output panel with Tailwind CSS (e.g., bg-gray-100, border, rounded).
• Ensure the panel is scrollable for long outputs.
• Update app.module.ts to declare OutputComponent.
• Commit changes with a message like feat: create output component.
• Push changes to the GitHub repository.

🏆 Expected Outcomes

• OutputComponent renders a styled, scrollable panel for displaying results.
• Component accepts an @Input() string and displays it correctly.
• Panel is styled consistently with the application’s design.
• Component is reusable and declared in the Angular module.
• Changes are committed and pushed to GitHub.

🔗 References

• Angular Input Properties
• Tailwind CSS Typography [the link is an example of typography in tailwind]
• Angular Components

📋 Notes

• Ensure the output panel is accessible (e.g., appropriate ARIA attributes).
• Test with sample output to verify scrolling and styling.

[Sandijigs]

@salazarsebas assign me this issue , I already Know How I will implement the design

[pushkarm029]

I can complete this quickly. Thanks!

Recommended by OnlyDust for outstanding experience and quality contributions.

[pushkarm029]

Hey @salazarsebas, can i work on this now?