@asafarim/shared-i18n 0.6.6 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/package.json +1 -1
- package/demo/src/components/LanguageBar.tsx +44 -0
- package/demo/src/index.css +39 -0
- package/package.json +1 -1
package/demo/package.json
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { LanguageSwitcher } from '@asafarim/shared-i18n'
|
|
2
|
+
import { useState } from 'react'
|
|
2
3
|
|
|
3
4
|
export default function LanguageBar() {
|
|
5
|
+
const [isDarkTheme, setIsDarkTheme] = useState(false)
|
|
6
|
+
|
|
7
|
+
const toggleTheme = () => {
|
|
8
|
+
setIsDarkTheme(!isDarkTheme)
|
|
9
|
+
document.documentElement.setAttribute('data-theme', isDarkTheme ? 'light' : 'dark')
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
return (
|
|
5
13
|
<div className="language-bar">
|
|
6
14
|
<LanguageSwitcher
|
|
@@ -14,6 +22,42 @@ export default function LanguageBar() {
|
|
|
14
22
|
// languages={undefined} // Use default languages
|
|
15
23
|
languages={["en", "nl", "fr"] as const}
|
|
16
24
|
/>
|
|
25
|
+
<div className='package-source-actions'>
|
|
26
|
+
<a
|
|
27
|
+
href="https://github.com/AliSafari-IT/shared-i18n"
|
|
28
|
+
target="_blank"
|
|
29
|
+
rel="noopener noreferrer"
|
|
30
|
+
className="icon-button"
|
|
31
|
+
title="View on GitHub"
|
|
32
|
+
aria-label="View repository on GitHub"
|
|
33
|
+
>
|
|
34
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
35
|
+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
|
36
|
+
</svg>
|
|
37
|
+
</a>
|
|
38
|
+
|
|
39
|
+
<a
|
|
40
|
+
href="https://www.npmjs.com/package/@asafarim/shared-i18n"
|
|
41
|
+
target="_blank"
|
|
42
|
+
rel="noopener noreferrer"
|
|
43
|
+
className="icon-button"
|
|
44
|
+
title="View on NPM"
|
|
45
|
+
aria-label="View package on NPM"
|
|
46
|
+
>
|
|
47
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
48
|
+
<path d="M0 0v16h16v-16h-16zm8.5 9.5h-1v-3h1v3zm0-4h-1v-1h1v1zm-3.5 4h-1v-6h1v6zm-3.5 0h-1v-4h1v4zm10.5 0h-1v-2h1v2zm0-3h-1v-3h1v3z"/>
|
|
49
|
+
</svg>
|
|
50
|
+
</a>
|
|
51
|
+
|
|
52
|
+
<button
|
|
53
|
+
onClick={toggleTheme}
|
|
54
|
+
className="icon-button"
|
|
55
|
+
title={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
|
|
56
|
+
aria-label={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
|
|
57
|
+
>
|
|
58
|
+
{isDarkTheme ? '☀️' : '🌙'}
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
17
61
|
</div>
|
|
18
62
|
)
|
|
19
63
|
}
|
package/demo/src/index.css
CHANGED
|
@@ -113,6 +113,45 @@ body {
|
|
|
113
113
|
gap: var(--asm-space-3);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
.package-source-actions {
|
|
117
|
+
display: flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
gap: var(--asm-space-2);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.icon-button {
|
|
123
|
+
display: inline-flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
width: 2.5rem;
|
|
127
|
+
height: 2.5rem;
|
|
128
|
+
padding: 0;
|
|
129
|
+
border: 1px solid var(--asm-color-border);
|
|
130
|
+
background: var(--asm-color-surface);
|
|
131
|
+
border-radius: var(--asm-radius-md);
|
|
132
|
+
color: var(--asm-color-text);
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
font-size: 1rem;
|
|
135
|
+
transition: all var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
|
|
136
|
+
text-decoration: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.icon-button:hover:not(:disabled) {
|
|
140
|
+
background: var(--asm-color-surface-muted);
|
|
141
|
+
border-color: var(--asm-color-primary-600);
|
|
142
|
+
box-shadow: var(--asm-effect-shadow-sm);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.icon-button:disabled {
|
|
146
|
+
opacity: 0.5;
|
|
147
|
+
cursor: not-allowed;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.icon-button:focus {
|
|
151
|
+
outline: 2px solid var(--asm-color-primary-600);
|
|
152
|
+
outline-offset: 2px;
|
|
153
|
+
}
|
|
154
|
+
|
|
116
155
|
.lang-button {
|
|
117
156
|
padding: var(--asm-space-2) var(--asm-space-4);
|
|
118
157
|
border: 2px solid var(--asm-color-bg);
|