Add LanguageSelector in the navbar #646
Conversation
✅ Deploy Preview for pendulum-pay ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new language selector to the navbar, enabling users to switch between English and Portuguese and have the URL update accordingly.
- Imports and renders
LanguageSelectoralongside existing controls in the navbar. - Introduces a
LanguageSelectorcomponent with dropdown UI, click-outside hook, and path-updating logic. - Adds helper functions (
useClickOutside,updatePathWithLanguage) and flag assets.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/Navbar/index.tsx | Imported and rendered LanguageSelector with disabled prop |
| frontend/src/components/LanguageSelector/index.tsx | Added new LanguageSelector component and associated helpers |
Comments suppressed due to low confidence (2)
frontend/src/components/Navbar/index.tsx:31
- [nitpick] The prop name
networkSelectorDisabledis specific to network selection. Consider renaming it to a more generic name (e.g.,selectorDisabled) or introducing a dedicatedlanguageSelectorDisabledprop to clarify its purpose.
<LanguageSelector disabled={networkSelectorDisabled} />
frontend/src/components/LanguageSelector/index.tsx:111
- There are currently no tests covering
LanguageSelectorbehavior (open/close, language switching, URL update). Consider adding unit or integration tests for these scenarios.
export const LanguageSelector = ({ disabled }: { disabled?: boolean }) => {
| } | ||
|
|
||
| const LanguageButton = ({ selectedLanguage, isOpen, onClick, disabled }: LanguageButtonProps) => ( | ||
| <motion.button |
There was a problem hiding this comment.
Consider adding ARIA attributes (e.g., aria-haspopup='menu', aria-expanded) and keyboard event handling (Enter/Space to toggle, arrow keys to navigate) to improve the dropdown’s accessibility.
Copilot uses AI. Check for mistakes.
| }, [callback, ref]); | ||
| } | ||
|
|
||
| // Helper function to update path with language |
There was a problem hiding this comment.
Add a JSDoc comment explaining how updatePathWithLanguage detects existing language segments and replaces or prepends them, to aid future maintainers in understanding the logic.
| // Helper function to update path with language | |
| /** | |
| * Updates the given path to include the specified language segment. | |
| * | |
| * This function checks if the path already contains a language segment | |
| * (e.g., "/en" or "/pt-br"). If a language segment is found, it replaces | |
| * it with the new language. If no language segment is found, it prepends | |
| * the new language segment to the path. | |
| * | |
| * @param {string} path - The URL path to update. | |
| * @param {Language} language - The language to include in the path. | |
| * @returns {string} - The updated path with the specified language segment. | |
| */ |
Copilot uses AI. Check for mistakes.
No description provided.