-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🔧 Refactor component imports and add language selection feature
- Loading branch information
Showing
7 changed files
with
273 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| interface Props { | ||
| height?: number; | ||
| width?: number; | ||
| } | ||
| const { height = 40, width = 40 }: Props = Astro.props; | ||
| --- | ||
|
|
||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 512 512" | ||
| id="united-states-of-america" | ||
| width={width} | ||
| height={height} | ||
| > | ||
| <path fill="#f0f0f0" d="M0 85.331h512v341.337H0z"></path> | ||
| <path | ||
| fill="#d80027" | ||
| d="M0 127.994h512v42.663H0zM0 | ||
| 213.331h512v42.663H0zM0 298.657h512v42.663H0zM0 383.994h512v42.663H0z" | ||
| ></path> | ||
| <path fill="#2e52b2" d="M0 85.331h256v183.797H0z"></path> | ||
| <path | ||
| fill="#f0f0f0" | ||
| d="m99.822 160.624-4.123 12.684H82.363l10.791 | ||
| 7.835-4.123 12.683 10.791-7.835 10.784 | ||
| 7.835-4.122-12.683 10.791-7.835h-13.337zM103.938 | ||
| 219.08l-4.116-12.683-4.123 12.683H82.363l10.791 | ||
| 7.836-4.123 12.683 10.791-7.836 10.784 | ||
| 7.836-4.122-12.683 10.791-7.836zM47.577 | ||
| 219.08l-4.117-12.683-4.123 12.683H26.001l10.791 | ||
| 7.836-4.123 12.683 10.791-7.836 10.785 7.836-4.122-12.683 | ||
| 10.789-7.836zM43.46 160.624l-4.123 12.684H26.001l10.791 | ||
| 7.835-4.123 12.683 10.791-7.835 10.785 7.835-4.122-12.683 | ||
| 10.789-7.835H47.577zM99.822 114.85l-4.123 12.685H82.363l10.791 | ||
| 7.836-4.123 12.683 10.791-7.836 10.784 7.836-4.122-12.683 | ||
| 10.791-7.836h-13.337zM43.46 114.85l-4.123 12.685H26.001l10.791 | ||
| 7.836-4.123 12.683 10.791-7.836 10.785 7.836-4.122-12.683 | ||
| 10.789-7.836H47.577zM156.183 160.624l-4.122 12.684h-13.336l10.79 | ||
| 7.835-4.121 12.683 10.789-7.835 10.786 7.835-4.123-12.683 | ||
| 10.791-7.835h-13.336zM160.301 219.08l-4.118-12.683-4.122 | ||
| 12.683h-13.336l10.79 7.836-4.121 12.683 10.789-7.836 | ||
| 10.786 7.836-4.123-12.683 10.791-7.836zM216.663 | ||
| 219.08l-4.117-12.683-4.123 12.683h-13.335l10.789 7.836-4.122 | ||
| 12.683 10.791-7.836 10.785 7.836-4.123-12.683 | ||
| 10.791-7.836zM212.546 160.624l-4.123 12.684h-13.335l10.789 | ||
| 7.835-4.122 12.683 10.791-7.835 10.785 | ||
| 7.835-4.123-12.683 10.791-7.835h-13.336zM156.183 | ||
| 114.85l-4.122 12.685h-13.336l10.79 7.836-4.121 12.683 | ||
| 10.789-7.836 10.786 7.836-4.123-12.683 10.791-7.836h-13.336zM212.546 | ||
| 114.85l-4.123 12.685h-13.335l10.789 7.836-4.122 12.683 10.791-7.836 | ||
| 10.785 7.836-4.123-12.683 10.791-7.836h-13.336z" | ||
| ></path> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| --- | ||
| interface Props { | ||
| height?: number; | ||
| width?: number; | ||
| } | ||
| const { height = 40, width = 40 }: Props = Astro.props; | ||
| --- | ||
|
|
||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 47.5 47.5" | ||
| id="spain" | ||
| width={width} | ||
| height={height} | ||
| > | ||
| <defs> | ||
| <clipPath id="a"> | ||
| <path d="M0 38h38V0H0v38Z"></path> | ||
| </clipPath> | ||
| </defs> | ||
| <g clip-path="url(#a)" transform="matrix(1.25 0 0 -1.25 0 47.5)"> | ||
| <path | ||
| fill="#dd2e44" | ||
| d="M37 10a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v18a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V10Z" | ||
| ></path> | ||
| <path fill="#ffcc4d" d="M37 13H1v12h36V13Z"></path> | ||
| <path fill="#ea596e" d="M10 20v-3a3 3 0 1 1 6 0v3h-6Z"></path> | ||
| <path fill="#f4a2b2" d="M13 18h3v3h-3v-3z"></path> | ||
| <path fill="#dd2e44" d="M13 18h-3v3h3v-3z"></path> | ||
| <path | ||
| fill="#ea596e" | ||
| d="M16 22.5c0-.829-1.343-1.5-3-1.5s-3 .671-3 1.5 1.343 1.5 3 1.5 3-.671 3-1.5" | ||
| ></path> | ||
| <path | ||
| fill="#ffac33" | ||
| d="M16 23.25c0 .414-1.343.75-3 .75s-3-.336-3-.75 1.343-.75 3-.75 3 .336 3 .75" | ||
| ></path> | ||
| <path fill="#99aab5" d="M8 14h1v7H8v-7zm10 0h-1v7h1v-7z"></path> | ||
| <path | ||
| fill="#66757f" | ||
| d="M10 14H7v1h3v-1zm9 0h-3v1h3v-1zM9 21H8v1h1v-1zm9 0h-1v1h1v-1z"></path> | ||
| </g> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| --- | ||
| import EnglishFlag from '@components/icons/flags/english.astro'; | ||
| import SpanishFlag from '@components/icons/flags/spanish.astro'; | ||
| const LANGUAGES_SUPPORTED = [ | ||
| { | ||
| id: 'es', | ||
| name: 'Español', | ||
| flag: SpanishFlag, | ||
| }, | ||
| { | ||
| id: 'en', | ||
| name: 'English', | ||
| flag: EnglishFlag, | ||
| }, | ||
| ]; | ||
| const path = Astro.url.pathname; | ||
| const currentLocale = LANGUAGES_SUPPORTED.find(({ id }) => path.startsWith(`/${id}`)) | ||
| || LANGUAGES_SUPPORTED[0]; | ||
| const LANGUAGES_FILTERED = LANGUAGES_SUPPORTED.filter( | ||
| ({ id }) => id !== currentLocale.id, | ||
| ); | ||
| --- | ||
|
|
||
| <div class="custom-select"> | ||
| <div class="select-selected"> | ||
| <currentLocale.flag height={30} width={30} /> | ||
| </div> | ||
| <div class="select-items"> | ||
| { | ||
| LANGUAGES_FILTERED.map((lang) => ( | ||
| <div class="language-option" data-lang-id={lang.id}> | ||
| <lang.flag height={20} width={20} /> | ||
| {lang.name} | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .custom-select { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: fit-content; | ||
| } | ||
|
|
||
| .select-selected { | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| transition: 0.3s ease; | ||
| border-radius: 1rem; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .select-selected:hover { | ||
| background-color: var(--bg-color-button-hover); | ||
| } | ||
|
|
||
| .select-items { | ||
| display: none; | ||
| position: absolute; | ||
| z-index: 1; | ||
| width: 100%; | ||
| min-width: 10rem; | ||
| right: 0; | ||
| } | ||
|
|
||
| .select-items div { | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .select-items div:nth-child(1) { | ||
| border-radius: 1rem 1rem 0 0; | ||
| } | ||
|
|
||
| .select-items div:last-child { | ||
| border-radius: 0 0 1rem 1rem; | ||
| } | ||
| .select-items div:hover { | ||
| background-color: var(--bg-color-button-hover); | ||
| } | ||
|
|
||
| .select-items:has(div:only-child) div { | ||
| border-radius: 1rem; | ||
| } | ||
|
|
||
| .custom-select.active .select-items { | ||
| display: block; | ||
| border-radius: 1rem; | ||
| border: 1px solid var(--border-color-nav); | ||
| margin-top: 5px; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| function changeLanguage(langId: string) { | ||
| const currentPath = window.location.pathname; | ||
| const hasLangPrefix = /^\/[a-z]{2}(\/|$)/.test(currentPath); | ||
|
|
||
| let newPath; | ||
| if (hasLangPrefix) { | ||
| newPath = currentPath.replace(/^\/[a-z]{2}/, `/${langId}`); | ||
| } else { | ||
| newPath = `/${langId}${currentPath}`; | ||
| } | ||
|
|
||
| window.location.pathname = newPath; | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const selectSelected = document.querySelector('.select-selected'); | ||
| const languageOptions = document.querySelectorAll('.language-option'); | ||
|
|
||
| languageOptions.forEach((option) => { | ||
| option.addEventListener('click', () => { | ||
| const langId = option.getAttribute('data-lang-id'); | ||
| langId && changeLanguage(langId); | ||
| }); | ||
| }); | ||
|
|
||
| if (selectSelected) { | ||
| selectSelected.addEventListener('click', () => { | ||
| selectSelected.parentElement?.classList.toggle('active'); | ||
| }); | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| import App from '@/components/App.astro'; | ||
| --- | ||
|
|
||
| <App /> |