- Dashboard: Pipeline-Übersicht (Counts pro Status) + Werkzeug-Kacheln - AudioHub (/audio): Coverage-Matrix je Tabelle×Sprache, Generieren-Buttons, Player - WordGenerator (/content/words): Thema→KI-Vorschau→Übernehmen als translated - reviewed in STATUS_COLORS + Status-Optionen (objects/questions/statements/pairs) - audios-Tabelle um source_*/language erweitert Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
import { useNavigate } from 'react-router-dom';
|
|
import Layout from '../components/Layout';
|
|
|
|
const TOOLS = [
|
|
{
|
|
key: 'creation',
|
|
title: 'Content Erstellen',
|
|
icon: '🎨',
|
|
description: 'Objekte in Bildern einzeichnen, Wörter verknüpfen und Pairs mit Fragen & Aussagen erstellen.',
|
|
path: '/content/creation',
|
|
ready: true,
|
|
},
|
|
{
|
|
key: 'words',
|
|
title: 'Wörter generieren',
|
|
icon: '🪄',
|
|
description: 'Neue Vokabeln zu einem Thema per KI erstellen, prüfen und übernehmen.',
|
|
path: '/content/words',
|
|
ready: true,
|
|
},
|
|
{
|
|
key: 'audio',
|
|
title: 'Audio / TTS',
|
|
icon: '🔊',
|
|
description: 'Sehen was noch kein Audio hat und Sprachausgabe generieren.',
|
|
path: '/audio',
|
|
ready: true,
|
|
},
|
|
{
|
|
key: 'publish',
|
|
title: 'Veröffentlichen',
|
|
icon: '✨',
|
|
description: 'Fertige Pairs prüfen, freigeben und veröffentlichen.',
|
|
path: '/content/publish',
|
|
ready: false,
|
|
},
|
|
];
|
|
|
|
export default function ContentHub() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Layout back="/">
|
|
<div className="max-w-3xl mx-auto">
|
|
<h1 className="text-2xl font-bold text-slate-800 mb-2">Content Verwaltung</h1>
|
|
<p className="text-slate-500 mb-8">Wähle ein Tool um loszulegen.</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
|
{TOOLS.map(tool => (
|
|
<button
|
|
key={tool.key}
|
|
onClick={() => tool.ready && navigate(tool.path)}
|
|
className={`text-left rounded-2xl p-6 shadow-sm border transition-all
|
|
${tool.ready
|
|
? 'bg-white border-slate-200 hover:shadow-md hover:border-indigo-300 cursor-pointer'
|
|
: 'bg-slate-50 border-slate-100 opacity-50 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
<div className="text-3xl mb-3">{tool.icon}</div>
|
|
<h2 className="font-semibold text-slate-800 mb-1">{tool.title}</h2>
|
|
<p className="text-sm text-slate-500">{tool.description}</p>
|
|
{!tool.ready && (
|
|
<span className="inline-block mt-3 text-xs bg-slate-200 text-slate-500 rounded-full px-2 py-0.5">
|
|
Bald verfügbar
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|