Files
snakkimo-cmt/src/pages/ContentHub.jsx
admin 465c6e4954 feat: Dashboard-Pipeline, AudioHub, WordGenerator, reviewed-Status
- 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>
2026-06-02 21:30:03 +02:00

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>
);
}