dff2ef796b
SDK modules added/enhanced: - compliance-hub, compliance-scope, consent-management, notfallplan - audit-report, workflow, source-policy, dsms - advisory-board documentation section - TOM dashboard components, TOM generator SDM mapping - DSFA: mitigation library, risk catalog, threshold analysis, source attribution - VVT: baseline catalog, profiling engine, types - Loeschfristen: baseline catalog, compliance engine, export, profiling, types - Compliance scope: engine, profiling, golden tests, types Existing SDK pages updated: - dsfa/[id], tom, vvt, loeschfristen, advisory-board — expanded functionality - SDKSidebar, StepHeader — new navigation items and layout - SDK layout, context, types — expanded type system Other admin-v2 changes: - AI agents page, RAG pipeline DSFA integration - GridOverlay component updates - Companion feature (development + education) - Compliance advisor SOUL definition Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { GraduationCap, Timer, Layout } from 'lucide-react'
|
|
import { CompanionMode } from '@/lib/companion/types'
|
|
|
|
interface ModeToggleProps {
|
|
currentMode: CompanionMode
|
|
onModeChange: (mode: CompanionMode) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
const modes: { id: CompanionMode; label: string; icon: React.ReactNode; description: string }[] = [
|
|
{
|
|
id: 'companion',
|
|
label: 'Companion',
|
|
icon: <GraduationCap className="w-4 h-4" />,
|
|
description: 'Dashboard mit Vorschlaegen',
|
|
},
|
|
{
|
|
id: 'lesson',
|
|
label: 'Lesson',
|
|
icon: <Timer className="w-4 h-4" />,
|
|
description: 'Timer und Phasen',
|
|
},
|
|
{
|
|
id: 'classic',
|
|
label: 'Classic',
|
|
icon: <Layout className="w-4 h-4" />,
|
|
description: 'Klassische Ansicht',
|
|
},
|
|
]
|
|
|
|
export function ModeToggle({ currentMode, onModeChange, disabled }: ModeToggleProps) {
|
|
return (
|
|
<div className="bg-white border border-slate-200 rounded-xl p-1 inline-flex gap-1">
|
|
{modes.map((mode) => {
|
|
const isActive = currentMode === mode.id
|
|
return (
|
|
<button
|
|
key={mode.id}
|
|
onClick={() => onModeChange(mode.id)}
|
|
disabled={disabled}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium
|
|
transition-all duration-200
|
|
${isActive
|
|
? 'bg-slate-900 text-white shadow-sm'
|
|
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
|
|
}
|
|
${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
|
|
`}
|
|
title={mode.description}
|
|
>
|
|
{mode.icon}
|
|
<span>{mode.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|