source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: add language switcher to site footer and enhance styling for responsiveness
+44
-29
+23
-28
src/components/LanguageSwitcher.astro
+23
-28
src/components/LanguageSwitcher.astro
···
9
9
const { currentLocale, currentPath = '/' } = Astro.props
10
10
const allLocales = [DEFAULT_LOCALE, ...SUPPORTED_LOCALES]
11
11
12
-
const LOCALE_SHORT: Record<string, string> = {
13
-
en: 'EN', de: 'DE', fr: 'FR', ja: 'JA', ko: 'KO',
14
-
'es-MX': 'ES', 'pt-BR': 'PT', 'es-419': 'LA',
15
-
}
16
-
const currentShort = LOCALE_SHORT[currentLocale] ?? currentLocale.slice(0, 2).toUpperCase()
12
+
const currentLabel = LOCALE_LABELS[currentLocale] ?? currentLocale
17
13
---
18
14
19
15
<div class="lang-switcher">
20
16
<span class="lang-icon" aria-hidden="true">
21
-
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
22
-
<path d="M8.673 3.063c-.244.075-.523.351-.609.603-.047.138-.064.341-.064.761V5H5.947c-2.349 0-2.34-.001-2.641.3a.96.96 0 0 0 0 1.4c.314.314.127.3 4.101.3 3.22 0 3.513.005 3.513.065 0 .149-.218 1.021-.348 1.394-.285.818-.892 1.927-1.409 2.575l-.171.213-.257-.349A9.527 9.527 0 0 1 7.579 8.86c-.186-.442-.317-.615-.553-.733-.552-.275-1.21-.025-1.4.533-.097.284-.082.462.07.852.387.992.953 1.976 1.637 2.842l.263.334-.172.148c-.863.747-2.316 1.621-3.528 2.122-.475.196-.642.323-.773.585a.989.989 0 0 0 .82 1.449c.252.021.632-.121 1.637-.613 1.194-.583 2.298-1.298 3.168-2.051l.248-.214.272.231a17.26 17.26 0 0 0 1.627 1.188c.217.135.402.265.411.288.009.024-.049.222-.129.441-.48 1.319-1.129 3.357-1.164 3.658a.972.972 0 0 0 .285.78.987.987 0 0 0 1.404.001c.158-.159.19-.228.359-.768.102-.326.284-.895.406-1.263l.22-.67h5.626l.22.67c.122.368.304.937.406 1.263.169.54.201.609.359.768a.988.988 0 0 0 1.042.233c.412-.141.704-.612.645-1.042-.053-.387-.884-2.912-1.413-4.292-.731-1.907-1.718-4.047-2.406-5.215-.373-.632-.969-.985-1.666-.985-.701 0-1.291.351-1.673.996-.285.48-1.005 1.917-1.385 2.764a26.31 26.31 0 0 1-.346.756c-.05.056-1.688-1.164-1.666-1.242.006-.02.118-.171.249-.337 1.136-1.429 1.994-3.352 2.206-4.947l.052-.39h.584c.731 0 .922-.049 1.176-.303.183-.183.303-.46.303-.697 0-.237-.12-.514-.303-.697-.305-.305-.292-.303-2.644-.303H10v-.553c0-.696-.052-.893-.303-1.144-.279-.279-.63-.361-1.024-.24m7.344 9.416c.605 1.197 1.543 3.319 1.543 3.491 0 .017-.918.03-2.04.03-1.122 0-2.04-.006-2.04-.012 0-.007.036-.087.08-.179a.803.803 0 0 0 .08-.269c0-.244 1.112-2.699 1.711-3.775.131-.236.146-.25.197-.181.03.041.241.444.469.895" fill="currentColor" fill-rule="evenodd"/>
17
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" style="display:block;flex-shrink:0">
18
+
<path d="M11.08 2.045c-1.874.165-3.723.904-5.28 2.109-.437.339-1.307 1.209-1.646 1.646-1.8 2.326-2.505 5.195-1.976 8.046.29 1.566.959 3.04 1.976 4.354.339.437 1.209 1.307 1.646 1.646 2.441 1.889 5.453 2.566 8.44 1.895 2.487-.559 4.752-2.144 6.145-4.301.806-1.247 1.283-2.527 1.521-4.08.098-.641.098-2.079 0-2.72-.285-1.858-.936-3.388-2.06-4.84-.339-.437-1.209-1.307-1.646-1.646-2.067-1.599-4.554-2.336-7.12-2.109m1.345 2.068c.599.31 1.046 1.356 1.294 3.027.101.683.196 1.67.164 1.707-.147.171-3.619.171-3.766 0-.032-.037.063-1.024.164-1.707.274-1.845.761-2.87 1.479-3.105.154-.051.493-.011.665.078M8.8 4.714c0 .018-.037.14-.082.27-.227.656-.554 2.514-.558 3.176-.002.252-.024.257-.483.097-.761-.264-2.117-.892-2.117-.98 0-.071.496-.641.886-1.018A7.26 7.26 0 0 1 8.3 4.912c.454-.237.5-.256.5-.198m6.811.151a7.509 7.509 0 0 1 1.943 1.394c.385.372.886.947.886 1.016 0 .042-.866.486-1.32.677-.209.089-.568.226-.797.305-.459.16-.481.155-.482-.099-.001-.2-.15-1.389-.226-1.798a11.97 11.97 0 0 0-.333-1.376c-.085-.245-.097-.304-.061-.304a5.4 5.4 0 0 1 .39.185M4.662 9.077c.062.06 1.21.623 1.598.784.198.082.674.253 1.057.38l.697.232-.005 1.273c-.003.701.007 1.604.023 2.007.015.404.023.739.017.745-.041.041-1.301-.368-2.049-.664-.586-.233-1.852-.852-1.928-.943-.085-.103-.07-1.597.022-2.145.107-.639.42-1.706.501-1.706.016 0 .046.017.067.037m14.851.173a8.02 8.02 0 0 1 .478 3.021c-.019.553-.024.584-.115.654-.162.124-1.348.699-1.876.909-.746.296-2.008.705-2.049.664-.006-.006.002-.341.017-.745.016-.403.026-1.306.023-2.007l-.005-1.273.697-.232a20.45 20.45 0 0 0 1.057-.38c.386-.159 1.535-.723 1.598-.784.068-.066.095-.04.175.173M11 10.96c.83.063 1.855.039 2.776-.065l.236-.027-.026 1.816c-.028 1.978-.041 2.184-.141 2.213a10.34 10.34 0 0 1-.725.067c-.899.065-2.926.003-3.021-.092-.045-.045-.096-1.492-.097-2.767L10 10.871l.25.026c.138.014.475.042.75.063m-5.349 4.882c.623.238 1.355.465 2.055.637l.526.129.027.226c.085.695.279 1.624.447 2.139.056.171.093.321.082.332-.061.061-1.165-.58-1.688-.979a10.805 10.805 0 0 1-1.311-1.286c-.373-.461-.949-1.372-.949-1.499 0-.012.067.007.15.042.082.036.38.152.661.259m13.396-.056c-.319.629-.873 1.356-1.493 1.955-.459.444-.728.66-1.234.989-.372.241-1.076.607-1.108.575-.011-.011.026-.161.082-.332.167-.507.353-1.409.447-2.158l.025-.206.607-.15a20.184 20.184 0 0 0 2.327-.751c.242-.098.446-.173.453-.167.007.006-.041.116-.106.245m-7.507 1.199c.486.014 1.117.006 1.497-.02.361-.024.661-.04.666-.035.019.02-.105.663-.205 1.063-.253 1.01-.619 1.654-1.078 1.899-.116.062-.231.085-.42.085-.688 0-1.177-.667-1.516-2.069a11.478 11.478 0 0 1-.144-.668 2.58 2.58 0 0 0-.048-.256c-.02-.07-.005-.074.193-.05.118.014.593.037 1.055.051" fill="currentColor" fill-rule="evenodd"/>
23
19
</svg>
24
20
</span>
25
-
<span class="lang-code">{currentShort}</span>
21
+
<span class="lang-code">{currentLabel}</span>
26
22
<select
27
23
class="lang-select"
28
24
aria-label="Select language"
···
58
54
59
55
<style>
60
56
.lang-switcher {
61
-
position: fixed;
62
-
bottom: 1.25rem;
63
-
right: 1.25rem;
64
-
z-index: 100;
57
+
position: relative;
65
58
display: inline-flex;
66
59
align-items: center;
67
-
gap: 5px;
68
-
padding: 6px 10px 6px 8px;
69
-
background: rgba(5, 7, 10, 0.72);
70
-
backdrop-filter: blur(12px);
71
-
-webkit-backdrop-filter: blur(12px);
72
-
border: 1px solid rgba(255, 255, 255, 0.1);
73
-
border-radius: 999px;
60
+
gap: 7px;
74
61
cursor: pointer;
75
-
color: rgba(243, 245, 254, 0.65);
76
-
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
62
+
color: var(--orbyt-neutral-300);
63
+
transition: color 0.15s ease;
64
+
text-decoration: none;
65
+
line-height: 1;
77
66
}
78
67
79
68
.lang-switcher:hover {
80
-
color: #f3f5fe;
81
-
border-color: rgba(255, 255, 255, 0.25);
82
-
background: rgba(5, 7, 10, 0.88);
69
+
color: var(--orbyt-white);
83
70
}
84
71
85
72
.lang-icon {
86
73
display: flex;
87
74
align-items: center;
75
+
justify-content: center;
88
76
flex-shrink: 0;
77
+
width: 15px;
78
+
height: 15px;
89
79
}
90
80
91
81
.lang-code {
92
-
font-family: 'Figtree', sans-serif;
93
-
font-size: 11px;
94
-
font-weight: 700;
95
-
letter-spacing: 0.1em;
82
+
font-size: 13px;
83
+
font-weight: bold;
84
+
letter-spacing: 0.04em;
96
85
line-height: 1;
97
86
}
98
87
···
109
98
.lang-select option {
110
99
background: #111;
111
100
color: #f3f5fe;
101
+
}
102
+
103
+
@media (max-width: 640px) {
104
+
.lang-code {
105
+
font-size: 12px;
106
+
}
112
107
}
113
108
</style>