172 lines
11 KiB
TypeScript
172 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
import { Link } from '@/lib/navigation';
|
|
|
|
export default function CuratorHelpClient() {
|
|
const t = useTranslations('CuratorHelp');
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
|
<header style={{ marginBottom: '2rem' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>{t('title')}</h1>
|
|
<Link
|
|
href="/curator"
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
background: '#6b7280',
|
|
color: 'white',
|
|
textDecoration: 'none',
|
|
borderRadius: '0.375rem',
|
|
fontSize: '0.9rem',
|
|
}}
|
|
>
|
|
{t('backToDashboard')}
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
|
|
{/* Einführung */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('introductionTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
|
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
|
|
</ul>
|
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
|
<strong>{t('note')}:</strong> {t('permissionNote')}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Song-Upload */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('uploadTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
|
|
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
|
|
</ol>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
|
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
|
|
</ul>
|
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
|
|
<strong>{t('tip')}:</strong> {t('uploadTip')}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Song-Bearbeitung */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('editingTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
|
|
<p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
|
|
<p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
|
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
|
|
</ul>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
|
|
<p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Specials kuratieren */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('curateSpecialsHelpTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
|
|
{t('curateSpecialsHelpStepsTitle')}
|
|
</h3>
|
|
<ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
|
|
</ol>
|
|
<p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
|
|
<strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Kommentar-Verwaltung */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('commentsTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
|
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
|
|
<li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Best Practices */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('bestPracticesTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
|
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
|
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
|
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
|
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
|
|
<li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Troubleshooting */}
|
|
<section>
|
|
<h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
|
|
{t('troubleshootingTitle')}
|
|
</h2>
|
|
<div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
|
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
|
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
|
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
|
|
<h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
|
|
<p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|