Skip to content

Commit 815cde5

Browse files
anr2601anr2601
committed
Added more intuitive meanings to translation keys, and setup i18n with en.json file
1 parent b228921 commit 815cde5

File tree

15 files changed

+73
-466
lines changed

15 files changed

+73
-466
lines changed

‎src/components/NavigationBar/AppThemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const AppThemeToggle = () => {
1515
console.log(appTheme)
1616

1717
return <div>
18-
<button onClick={handleClick}>{t(`navbar.${appTheme}`)}</button>
18+
<button onClick={handleClick}>${appTheme}</button>
1919
</div>
2020
}
2121

‎src/components/NavigationBar/NavigationBar.tsx

Lines changed: 20 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,7 @@ const NavigationBar = () => {
6060
<>
6161
<span style={{display:"inline-flex"}}><img src="https://flagcdn.com/gb.svg" height="25" width="25" alt="England" /></span>{" "+t('lang.eng')}
6262
</>); // Show English label
63-
case 'fr':
64-
return (
65-
<>
66-
<span style={{display:"inline-flex"}}><img src="https://flagcdn.com/fr.svg" height="25" width="25" alt="France"/></span>{" "+t('lang.fre')}
67-
</>); // Show French label
68-
case 'hi':
69-
return (
70-
<>
71-
<span style={{display:"inline-flex"}}><img src="https://flagcdn.com/in.svg" height="25" width="25" alt="India"/></span>{" "+t('lang.hi')}
72-
</>
73-
)
63+
7464
default:
7565
return(
7666
<>
@@ -134,23 +124,23 @@ const NavigationBar = () => {
134124
to="/plugins"
135125
className="block px-4 py-2 hover:bg-gray-700"
136126
>
137-
{t('navbar.plugin')}
127+
Plugins
138128
</Link>
139129
</li>
140130
<li className="my-1">
141131
<Link
142132
to="/themes"
143133
className="block px-4 py-2 hover:bg-gray-700"
144134
>
145-
{t('navbar.themes')}
135+
Themes
146136
</Link>
147137
</li>
148138
<li className="my-1">
149139
<Link
150140
to="/theme-builder"
151141
className="block px-4 py-2 hover:bg-gray-700"
152142
>
153-
{t('navbar.thbuild')}
143+
Theme Builder
154144
</Link>
155145
</li>
156146
<li className="my-1">
@@ -159,7 +149,7 @@ const NavigationBar = () => {
159149
target="_blank"
160150
className="block px-4 py-2 hover:bg-gray-700"
161151
>
162-
{t('navbar.docs')}
152+
Documentation
163153
</Link>
164154
</li>
165155
<li className="my-1">
@@ -168,7 +158,7 @@ const NavigationBar = () => {
168158
target="_blank"
169159
className="block px-4 py-2 hover:bg-gray-700"
170160
>
171-
{t('navbar.discord')}
161+
Discord
172162
</Link>
173163
</li>
174164
{/* needs improvement */}
@@ -192,9 +182,8 @@ const NavigationBar = () => {
192182
className={`absolute w-24 bg-gray-800 rounded-md shadow-lg ${isOpen ? 'block' : 'hidden'}`}
193183
style={{left: '-50%', transform: 'translateX(-21%)', top: '-16%', marginTop: '8px', }}
194184
>
195-
<li className="px-4 py-2 hover:bg-gray-700 cursor-pointer" onClick={() => handleOptionClick('en')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/gb.svg" height="25" width="25" alt="England" /></span>{t('lang.eng')}</li>
196-
<li className="px-4 py-2 hover:bg-gray-700 cursor-pointer" onClick={() => handleOptionClick('fr')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/fr.svg" height="25" width="25" alt="France" /></span>{t('lang.fre')}</li>
197-
<li className="px-4 py-2 hover:bg-gray-700 cursor-pointer" onClick={() => handleOptionClick('hi')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/hi.svg" height="25" width="25" alt="India" /></span>{t('lang.hi')}</li>
185+
<li className="px-4 py-2 hover:bg-gray-700 cursor-pointer" onClick={() => handleOptionClick('en')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/gb.svg" height="25" width="25" alt="England" /></span>English</li>
186+
198187
{/* Add more options as needed */}
199188
</ul>
200189
</li>
@@ -205,15 +194,15 @@ const NavigationBar = () => {
205194
to="/profile"
206195
className="block px-4 py-2 hover:bg-gray-700"
207196
>
208-
{t('navbar.profile')}
197+
Profile
209198
</Link>
210199
</li>
211200
<li className="my-1">
212201
<button
213202
className="block px-4 py-2 hover:bg-gray-700"
214203
type="button"
215204
>
216-
{t('navbar.logout')}
205+
Logout
217206
</button>
218207
</li>
219208
</>
@@ -223,7 +212,7 @@ const NavigationBar = () => {
223212
to="/login"
224213
className="block px-4 py-2 hover:bg-gray-700"
225214
>
226-
{t('navbar.login')}
215+
Login
227216
</Link>
228217
</li>
229218
)}
@@ -241,17 +230,17 @@ const NavigationBar = () => {
241230
</li> */}
242231
<li className="mr-8">
243232
<Link to="/plugins" className="hover:text-blue-500">
244-
{t('navbar.plugin')}
233+
Plugins
245234
</Link>
246235
</li>
247236
<li className="mr-8">
248237
<Link to="/themes" className="hover:text-blue-500">
249-
{t('navbar.themes')}
238+
Themes
250239
</Link>
251240
</li>
252241
<li className="mr-8">
253242
<Link to="/theme-builder" className="hover:text-blue-500">
254-
{t('navbar.thbuild')}
243+
Theme Builder
255244
</Link>
256245
</li>
257246
<li className="mr-8">
@@ -260,7 +249,7 @@ const NavigationBar = () => {
260249
target="_blank"
261250
className="hover:text-blue-500"
262251
>
263-
{t('navbar.docs')}
252+
Documentation
264253
</Link>
265254
</li>
266255
<li className="mr-8">
@@ -269,7 +258,7 @@ const NavigationBar = () => {
269258
target="_blank"
270259
className="hover:text-blue-500"
271260
>
272-
{t('navbar.discord')}
261+
Discord
273262
</Link>
274263
</li>
275264
{/* needs improvement */}
@@ -290,17 +279,15 @@ const NavigationBar = () => {
290279
className={`absolute mt-2 w-28 bg-black shadow-lg ${isOpen ? 'block' : 'hidden'}`}
291280
style={{ zIndex: 1000, left: '50%', transform: 'translateX(-50%)', top: '100%', marginTop: '8px', }}
292281
>
293-
<li className="px-2 py-2 hover:bg-blue-500 cursor-pointer" onClick={() => changeLanguage('en')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/gb.svg" height="25" width="25" alt="England" /></span> {t('lang.eng')} </li>
294-
<li className="px-2 py-2 hover:bg-blue-500 cursor-pointer" onClick={() => changeLanguage('fr')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/fr.svg" height="25" width="25" alt="France" /></span> {t('lang.fre')}</li>
295-
<li className="px-3 py-2 hover:bg-blue-500 cursor-pointer" onClick={() => changeLanguage('hi')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/in.svg" height="25" width="25" alt="India" /></span> {t('lang.hi')}</li>
282+
<li className="px-2 py-2 hover:bg-blue-500 cursor-pointer" onClick={() => changeLanguage('en')}><span style={{display:"inline-flex"}}><img src="https://flagcdn.com/gb.svg" height="25" width="25" alt="England" /></span> English </li>
296283
{/* Add more options as needed */}
297284
</ul>
298285
</li>
299286
{isLoggedIn ? (
300287
<>
301288
<li className="mr-8">
302289
<Link to="/profile" className="hover:text-blue-500">
303-
{t('navbar.profile')}
290+
Profile {/* {t('navbar.profile')} */}
304291
</Link>
305292
</li>
306293
<li>
@@ -313,7 +300,7 @@ const NavigationBar = () => {
313300
}}
314301
className="mr-8"
315302
>
316-
{t('navbar.logout')}
303+
Logout
317304
</button>
318305
</li>
319306
</>
@@ -324,7 +311,7 @@ const NavigationBar = () => {
324311
onClick={() => handleLogin()}
325312
className="hover:text-blue-500 mr-8"
326313
>
327-
{t('navbar.login')}
314+
Login
328315
</button>
329316
</li>
330317
)}

‎src/components/SearchBar/SearchBar.tsx

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { useState } from 'react';
22
import { useSearchParams } from 'react-router-dom';
3-
<<<<<<< HEAD
43
import { useTranslation } from 'react-i18next';
5-
=======
6-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
74

85
type Props = {
96
onSearch: (query: string) => void;
@@ -34,23 +31,12 @@ const SearchBar: React.FC<Props> = ({ onSearch }) => {
3431
}
3532
}
3633

37-
<<<<<<< HEAD
38-
const { t } = useTranslation();
39-
40-
return (
41-
<div className="mb-8">
42-
<h2 className="text-lg font-semibold mb-4">{t('themes.srch')}</h2>
43-
<input
44-
type="text"
45-
placeholder={t('themes.schbar')}
46-
=======
4734
return (
4835
<div className="mb-8">
4936
<h2 className="text-lg font-semibold mb-4">Search</h2>
5037
<input
5138
type="text"
5239
placeholder="Search themes..."
53-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
5440
value={query}
5541
onChange={handleChange}
5642
onKeyDown={handleKeyDown}

‎src/components/Themes/ThemeCard.tsx

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import ThemeModal from './ThemeModal';
66
import { Theme } from '../../interfaces/Theme';
77
import FavIcon from '../../assets/images/icon_favorite.svg';
88
import GitHubIcon from '../../assets/images/icon_github_white.svg';
9-
<<<<<<< HEAD
109
import { useTranslation } from 'react-i18next';
11-
=======
12-
13-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
1410
import '../../styles/theme_card.css'
1511

1612
type Props = {
@@ -34,11 +30,8 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
3430
onPreview(theme.name)
3531
}
3632

37-
<<<<<<< HEAD
3833
const {t} = useTranslation();
3934

40-
=======
41-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
4235
return (
4336
<>
4437
<div className="text-black w-[300px] h-[545px]">
@@ -53,20 +46,12 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
5346
group-hover:-translate-y-6 transition ease-in-out duration"
5447
alt={theme.name}
5548
/>
56-
<<<<<<< HEAD
57-
<div className="theme-card-details">{t('themes.thlist.vd')}</div>
58-
=======
5949
<div className="theme-card-details">View Details</div>
60-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
6150
</button>
6251
<div className="theme-card-info">
6352
<div>
6453
<div className="flex justify-between">
65-
<<<<<<< HEAD
66-
<p className="theme-card-title">{t(theme.name)}</p>
67-
=======
6854
<p className="theme-card-title">{theme.name}</p>
69-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
7055
<button
7156
type="button"
7257
aria-label="Favorite Button"
@@ -76,11 +61,7 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
7661
<img src={FavIcon} alt="fav-icon" />
7762
</button>
7863
</div>
79-
<<<<<<< HEAD
80-
<p className="text-[15px] opacity-80">{t(theme.description)}</p>
81-
=======
8264
<p className="text-[15px] opacity-80">{theme.description}</p>
83-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
8465
</div>
8566
<Link to={`/profile/${theme.github}`} className="theme-card-github">
8667
<img src={GitHubIcon} alt="github-icon" />

‎src/components/Themes/ThemeModal.tsx

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React, { useEffect, useRef } from 'react';
22

33
import ReactDOM from 'react-dom';
4-
<<<<<<< HEAD
54
import { useTranslation } from 'react-i18next';
6-
=======
7-
8-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
95
import { downloadThemeContent } from '../../utils';
106
import { Theme } from '../../interfaces/Theme';
117

@@ -21,11 +17,8 @@ type ThemeModalProps = {
2117
const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
2218
const modalRef = useRef<HTMLDivElement>(null)
2319

24-
<<<<<<< HEAD
2520
const {t} = useTranslation();
2621

27-
=======
28-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
2922
useEffect(() => {
3023
const handleClickOutside = (event: MouseEvent) => {
3124
if (
@@ -84,17 +77,6 @@ const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
8477
<div className="space-y-4">
8578
<div className="space-y-2">
8679
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
87-
<<<<<<< HEAD
88-
<div className="font-semibold">{t('themes.carddetails.name')}:</div>
89-
<div>{theme.name}</div>
90-
<div className="font-semibold">{t('themes.carddetails.details')}:</div>
91-
<div>{theme.description}</div>
92-
<div className="font-semibold">{t('themes.carddetails.id')}:</div>
93-
<div>{theme.id}</div>
94-
<div className="font-semibold">{t('themes.carddetails.ver')}:</div>
95-
<div>{theme.version}</div>
96-
<div className="font-semibold">{t('themes.carddetails.auth')}:</div>
97-
=======
9880
<div className="font-semibold">Name:</div>
9981
<div>{theme.name}</div>
10082
<div className="font-semibold">Description:</div>
@@ -104,7 +86,6 @@ const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
10486
<div className="font-semibold">Version:</div>
10587
<div>{theme.version}</div>
10688
<div className="font-semibold">Author:</div>
107-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
10889
<div className="flex items-center space-x-2">
10990
{theme.authorImg && (
11091
<img
@@ -122,11 +103,7 @@ const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
122103
</a>
123104
</div>
124105
</div>
125-
<<<<<<< HEAD
126-
<div className="font-semibold">T{t('themes.carddetails.tags')}:</div>
127-
=======
128106
<div className="font-semibold">Tags:</div>
129-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
130107
<div className="flex flex-wrap gap-2">
131108
{theme.tags.map((tag, index) => (
132109
<span
@@ -137,21 +114,13 @@ const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
137114
</span>
138115
))}
139116
</div>
140-
<<<<<<< HEAD
141-
<div className="font-semibold">{t('themes.carddetails.cont')}:</div>
142-
=======
143117
<div className="font-semibold">Contents:</div>
144-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
145118
<button
146119
type="button"
147120
onClick={() => onDownload()}
148121
className="theme-card-download"
149122
>
150-
<<<<<<< HEAD
151-
{t('themes.carddetails.down')}
152-
=======
153123
Download
154-
>>>>>>> 45d0bd74b629ed311466970d2ae9c435d1df47a8
155124
</button>
156125
</div>
157126
</div>

‎src/i18n.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,11 @@ import { initReactI18next } from 'react-i18next';
33
import HttpApi from 'i18next-http-backend';
44
import LanguageDetector from 'i18next-browser-languagedetector';
55
import enLang from './utils/i18n/locales/en/en.json';
6-
import frLang from './utils/i18n/locales/fr/fr.json';
7-
import hiLang from './utils/i18n/locales/hi/hi.json';
86

97

108
const resources = {
119
en:{
1210
translation:enLang
13-
},
14-
fr:{
15-
translation:frLang
16-
},
17-
hi:{
18-
translation:hiLang
1911
}
2012
}
2113
i18n

0 commit comments

Comments
 (0)