popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu translations and ability to add new translations using the base translation

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-29 01:33:33 +03:00
parent c779eba469
commit 56283ecd50
7 changed files with 141 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
pages/cart/translations/index.tsx
View File

@ -35,34 +35,56 @@ const AdminTranslations = () => {
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<div>
<h1>Edit Translations</h1>
<select onChange={e => setLocale(e.target.value)} value={locale}>
{locales.map(l => (
<option key={l} value={l}>{l.toUpperCase()}</option>
))}
</select>
<table>
<tbody>
{Object.entries(translations).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
<td>{baseTranslations[key]}</td>
<td>
<input
type="text"
value={value}
onChange={e => handleChange(key, e.target.value)}
style={{ width: '100%' }}
/>
</td>
</tr>
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1>
<div className="my-4">
<label htmlFor="locale-select" className="block text-sm font-medium text-gray-700">Select Language</label>
<select
id="locale-select"
onChange={e => setLocale(e.target.value)}
value={locale}
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
{locales.map(l => (
<option key={l} value={l}>{l.toUpperCase()}</option>
))}
</tbody>
</table>
<button onClick={handleSave}>Save Changes</button>
</select>
</div>
<div className="overflow-x-auto relative shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" className="py-3 px-6">Key</th>
<th scope="col" className="py-3 px-6">Base Translation</th>
<th scope="col" className="py-3 px-6">Translation</th>
</tr>
</thead>
<tbody>
{Object.entries(baseTranslations).map(([key, baseValue]) => (
<tr key={key} className="bg-white border-b hover:bg-gray-50">
<td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">{key}</td>
<td className="py-4 px-6">{baseValue}</td>
<td className="py-4 px-6">
<input
type="text"
value={translations[key] || ''}
placeholder='Въведи превод...'
onChange={e => handleChange(key, e.target.value)}
className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded"
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
<button
onClick={handleSave}
className="mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save Changes
</button>
</div>
</ProtectedRoute>
</Layout>