feat(frontend): add routing, layout, i18n wiring, and restyle the conversion tool
Migrates the existing upload/format-select/quality/convert logic from the old single-file App.jsx into a router shell (/ -> /fr//en/) with a shared Layout (header, language switcher, dark-mode toggle, footer). Tool logic itself is unchanged, only restyled into cards. Part of the Ombrora Convert redesign (Task 2/5).
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DownloadSimple } from '@phosphor-icons/react';
|
||||
import { fetchJobStatus, downloadUrl } from './api.js';
|
||||
|
||||
export function FileCard({ fileName, jobId, initialError }) {
|
||||
const { t } = useTranslation();
|
||||
const [status, setStatus] = useState(initialError ? 'failed' : 'pending');
|
||||
const [errorMessage, setErrorMessage] = useState(initialError ?? null);
|
||||
|
||||
@@ -25,9 +28,13 @@ export function FileCard({ fileName, jobId, initialError }) {
|
||||
|
||||
return (
|
||||
<li className="file-card">
|
||||
<span className="file-name">{fileName}</span>
|
||||
{(status === 'pending' || status === 'processing') && <span>Conversion en cours...</span>}
|
||||
{status === 'done' && <a href={downloadUrl(jobId)}>Télécharger</a>}
|
||||
<span className="file-config-name">{fileName}</span>
|
||||
{(status === 'pending' || status === 'processing') && <span>{t('job.converting')}</span>}
|
||||
{status === 'done' && (
|
||||
<a href={downloadUrl(jobId)}>
|
||||
<DownloadSimple size={20} weight="regular" /> {t('job.download')}
|
||||
</a>
|
||||
)}
|
||||
{status === 'failed' && <span className="error">{errorMessage}</span>}
|
||||
</li>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user