root
61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import { useState } from "react"
|
|
import { Cpu, ShieldCheck, Bot, ChevronRight, ArrowLeft } from "lucide-react"
|
|
import { Cockpit } from "@/views/models/Cockpit"
|
|
import { AgentView } from "@/views/AgentView"
|
|
import { ExpertToggle } from "@/components/ExpertToggle"
|
|
|
|
// Maschinenraum = die eine Tür für alles Technische. Faltet Modelle/Wartung/Hermes
|
|
// zusammen; jede Sektion rendert die BESTEHENDE, bewährte View wieder.
|
|
function SectionCard({ icon: Icon, title, sub, onClick }: {
|
|
icon: any; title: string; sub: string; onClick: () => void
|
|
}) {
|
|
return (
|
|
<button onClick={onClick}
|
|
className="w-full flex items-center gap-4 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 text-left transition-all hover:border-primary/40 cursor-pointer">
|
|
<Icon className="h-6 w-6 text-muted-foreground shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm text-foreground">{title}</div>
|
|
<div className="text-xs text-muted-foreground">{sub}</div>
|
|
</div>
|
|
<ChevronRight className="h-5 w-5 text-muted-foreground shrink-0" />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function Mc3Maschinenraum() {
|
|
const [section, setSection] = useState<null | "modelle" | "hermes">(null)
|
|
|
|
if (section) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<button onClick={() => setSection(null)}
|
|
className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
|
|
<ArrowLeft className="h-4 w-4" /> Maschinenraum
|
|
</button>
|
|
{section === "modelle" ? <Cockpit /> : <AgentView />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h1 className="text-2xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
|
|
Maschinenraum
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">Nur nötig, wenn du wirklich was ändern willst.</p>
|
|
</div>
|
|
<ExpertToggle />
|
|
</div>
|
|
|
|
<SectionCard icon={Cpu} title="Modelle" sub="Hirne, Coder, Immer-bereit-Set, Bibliothek"
|
|
onClick={() => setSection("modelle")} />
|
|
<SectionCard icon={ShieldCheck} title="Wartung und Logs" sub="Updates, Backup, Dienste, Logs, Zugangsdaten"
|
|
onClick={() => window.dispatchEvent(new CustomEvent("open-system-drawer", { detail: { tab: "maintenance" } }))} />
|
|
<SectionCard icon={Bot} title="Hermes und Verdrahtung" sub="Agent, Gehirn-Modell, PC-Verbindung"
|
|
onClick={() => setSection("hermes")} />
|
|
</div>
|
|
)
|
|
}
|