Create Title Bar component

[sweep-ai[bot]]

PR Feedback (click)

• [ ] 👍 Sweep Did Well
• [ ] 👎 Sweep Needs Improvement

  Description

  This PR adds a new component named TitleBar to the project. The TitleBar component displays a dark grey title bar across the top of the page. It has been implemented as a functional component and is styled using CSS in JS.

Summary of Changes

• Created a new file title-bar.tsx in the app/components directory.
• Implemented the TitleBar component in title-bar.tsx, which returns a div with a dark grey background.
• Imported the TitleBar component in page.tsx.
• Added the TitleBar component to the Home function in page.tsx, before the Card components.

Please review and merge this PR. Thank you!

Fixes #11.

---

🎉 Latest improvements to Sweep:

• Sweep can now passively improve your repository! Check out Rules to learn more.

---

💡 To get Sweep to edit this pull request, you can:

• Comment below, and Sweep can edit the entire PR
• Comment on a file, Sweep will only modify the commented file
• Edit the original issue to get Sweep to recreate the PR from scratch

[sweep-ai[bot]]

Sandbox Executions

• [X] Check app/components/title-bar.tsx ✓

  Sandbox logs for https://github.com/danwill89/gen-ai/commit/55c40587684bad0914c131e20a4a9cb6fe73460a

trunk fmt app/components/title-bar.tsx || exit 0 1/2 ✓

 ✔ Formatted app/components/title-bar.tsx
Re-checking autofixed files...

Checked 1 file
✔ No issues
Run trunk upgrade to upgrade 2 linters

trunk check --fix --print-failures app/components/title-bar.tsx 2/2 ✓

Checked 1 file
✔ No issues

• [X] Check app/page.tsx ✓

  Sandbox logs for

trunk fmt app/page.tsx || exit 0 1/2 ✓

Checked 1 file
✔ No issues
Run trunk upgrade to upgrade 2 linters

trunk check --fix --print-failures app/page.tsx 2/2 ✓

Checked 1 file
✔ No issues

[sweep-ai[bot]]

Apply Sweep Rules to your PR?

• [ ] Apply: All docstrings and comments should be up to date.
• [ ] Apply: Code should be properly formatted and follow consistent indentation.
• [ ] Apply: Variable and function names should be descriptive and follow a consistent naming convention.
• [ ] Apply: There should be no commented out code or unused variables or functions.
• [ ] Apply: Code should be modular and follow the principle of separation of concerns.
• [ ] Apply: There should be no hard-coded values or magic numbers in the code.

[danwill89]

Sweep: In title-bar.tsx update backgroundColor to be '#333333'

[sweep-ai[bot]]

🚀 Wrote Changes

Done.