Refactor components to use InlineSvg for icons, enhance Header layout with grid, and implement achievement system in FlagQuiz page

- Replaced inline SVGs with InlineSvg component in Filter, Header, and ThemeSwitcher components for better maintainability.
- Improved Header layout using CSS Grid for better alignment and spacing of elements.
- Added achievement tracking and display functionality in FlagQuiz, including reset confirmation dialog and achievement count updates.
- Enhanced user feedback with animated result icons in FlagQuiz for correct and wrong answers.
- Introduced country info tooltips in FlagQuiz for additional context on answers.
This commit is contained in:
sHa
2025-08-11 16:14:18 +03:00
parent f9182a6867
commit 292c7e88b6
42 changed files with 1348 additions and 167 deletions

View File

@@ -0,0 +1,7 @@
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="currentColor" />
<path
d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>

After

Width:  |  Height:  |  Size: 552 B