653fa07f57
Extracted components and constants into _components/ subdirectories to bring all three pages under the 300 LOC soft target (was 651/628/612, now 255/232/278 LOC respectively). Zero behavior changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
2.4 KiB
TypeScript
49 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { Course, Lesson } from '@/lib/sdk/academy/types'
|
|
|
|
interface OverviewTabProps {
|
|
course: Course
|
|
sortedLessons: Lesson[]
|
|
}
|
|
|
|
export function OverviewTab({ course, sortedLessons }: OverviewTabProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Kurs-Details</h3>
|
|
<dl className="grid grid-cols-2 gap-4 text-sm">
|
|
<div><dt className="text-gray-500">Bestehensgrenze</dt><dd className="font-medium text-gray-900">{course.passingScore}%</dd></div>
|
|
<div><dt className="text-gray-500">Pflicht fuer</dt><dd className="font-medium text-gray-900">{course.requiredForRoles?.join(', ') || 'Alle'}</dd></div>
|
|
<div><dt className="text-gray-500">Erstellt am</dt><dd className="font-medium text-gray-900">{new Date(course.createdAt).toLocaleDateString('de-DE')}</dd></div>
|
|
<div><dt className="text-gray-500">Aktualisiert am</dt><dd className="font-medium text-gray-900">{new Date(course.updatedAt).toLocaleDateString('de-DE')}</dd></div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Lektionen ({sortedLessons.length})</h3>
|
|
<div className="space-y-2">
|
|
{sortedLessons.map((lesson, i) => (
|
|
<div key={lesson.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50">
|
|
<div className="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center text-sm font-medium">
|
|
{i + 1}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-gray-900">{lesson.title}</div>
|
|
<div className="text-xs text-gray-500">{lesson.durationMinutes} Min. | {lesson.type === 'video' ? 'Video' : lesson.type === 'quiz' ? 'Quiz' : 'Text'}</div>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs rounded-full ${
|
|
lesson.type === 'quiz' ? 'bg-yellow-100 text-yellow-700' :
|
|
lesson.type === 'video' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{lesson.type === 'quiz' ? 'Quiz' : lesson.type === 'video' ? 'Video' : 'Text'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|