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

12
public/icons/sun.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.28451 10.3333C7.10026 10.8546 7 11.4156 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C11.4156 7 10.8546 7.10026 10.3333 7.28451" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12 20V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4 12L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M22 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M19.7778 4.22266L17.5558 6.25424" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.22217 4.22266L6.44418 6.25424" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.44434 17.5557L4.22211 19.7779" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M19.7778 19.7773L17.5558 17.5551" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB