feat: Add ErrorPopover for Real-Time Regex Syntax Validation

[jouchaib2020]

This update improves the regex learning journey by providing users with immediate syntax validation feedback, thereby enhancing the overall learning experience .

Changes

• Introduced the ErrorPopover component to display regex syntax errors.
• Implemented text color change from green to red when regex syntax is incorrect for real-time feedback on regex validity.
• Utilizes the newly added error icon for clear error indication.

[aykutkardas]

Could you add a screenshot?

[jouchaib2020]

Yes :)

[Copilot]

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

Files not reviewed (1)

• src/components/Icon/selection.json: Language not supported

Comments suppressed due to low confidence (2)

src/utils/checkRegex.ts:11

• The function name 'createGrouppedRegex' appears to have a misspelling; consider renaming it to 'createGroupedRegex' for clarity.

const createGrouppedRegex = (regex: string, flags?: string) => {

src/components/InteractiveArea.tsx:43

• [nitpick] Consider renaming 'isvalidRegexSyntax' to 'isValidRegexSyntax' to adhere to standard camelCase naming conventions.

const [isvalidRegexSyntax, setIsvalidRegexSyntax] = useState(true);