@smbcloud / pepakbasajawa-web
Code Commits Issues Pulls Cloud Agent CI/CD
copilot/add-i18n-support-for-english
copilot/add-i18n-support-for-english dependabot/npm_and_yarn/astro-5.16.4 dependabot/npm_and_yarn/katex-0.16.27 dependabot/npm_and_yarn/prettier-3.7.4 dependabot/npm_and_yarn/tailwindcss-4.1.16 dependabot/npm_and_yarn/tailwindcss/vite-4.1.16 dependabot/npm_and_yarn/typescript-eslint-8.46.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.2 development main
astro 65 lines 1.55 KB
Raw
1 ---
2 import { getLangFromUrl, getAlternateLanguage, getAlternateUrl, useTranslations } from '@/i18n/utils'
3
4 const currentLang = getLangFromUrl(Astro.url)
5 const alternateLang = getAlternateLanguage(currentLang)
6 const alternateUrl = getAlternateUrl(Astro.url, alternateLang)
7 const t = useTranslations(currentLang)
8 ---
9
10 <div class="language-switcher">
11 <a href={alternateUrl} class="lang-link" title={t('language.switch')}>
12 <svg
13 xmlns="http://www.w3.org/2000/svg"
14 width="20"
15 height="20"
16 viewBox="0 0 24 24"
17 fill="none"
18 stroke="currentColor"
19 stroke-width="2"
20 stroke-linecap="round"
21 stroke-linejoin="round"
22 >
23 <circle cx="12" cy="12" r="10"></circle>
24 <line x1="2" y1="12" x2="22" y2="12"></line>
25 <path
26 d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
27 ></path>
28 </svg>
29 <span class="lang-text">{alternateLang.toUpperCase()}</span>
30 </a>
31 </div>
32
33 <style>
34 .language-switcher {
35 display: flex;
36 align-items: center;
37 }
38
39 .lang-link {
40 display: flex;
41 align-items: center;
42 gap: 0.375rem;
43 padding: 0.5rem 0.75rem;
44 border-radius: 0.375rem;
45 color: var(--text-secondary);
46 text-decoration: none;
47 transition: all 0.2s ease-out;
48 font-size: var(--font-size-s);
49 font-weight: var(--font-weight-medium);
50 }
51
52 .lang-link:hover {
53 color: var(--text-primary);
54 background-color: var(--code-bg);
55 }
56
57 .lang-text {
58 font-weight: 600;
59 }
60
61 svg {
62 width: 1.125rem;
63 height: 1.125rem;
64 }
65 </style>