Hitonabi
eafeaf333d
ModelsView 1455 -> 46 Zeilen reiner Orchestrator. Die drei großen Komponenten in eigene Dateien verschoben (verbatim, kein Verhaltenswechsel): - views/models/Cockpit.tsx (~1007 Z., VRAM-HUD, Gateway-Graph, Modell-Bibliothek) - views/models/Discover.tsx (~285 Z., Empfehlungen) inkl. ROLE_METADATA - views/models/AddModel.tsx (~131 Z., HF-Download/Suche) Verifiziert: tsc grün, Build grün, Cockpit- und Discover-Tab rendern ohne Konsolenfehler. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
import { JobsBar } from "@/components/models/JobsBar"
|
|
import { Cockpit } from "./models/Cockpit"
|
|
import { Discover } from "./models/Discover"
|
|
|
|
export function ModelsView() {
|
|
const [tab, setTab] = useState<"cockpit" | "discover">("cockpit")
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
|
|
<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">
|
|
Modell-Manager
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Verwalte deine Modelle und passe das Gateway-Routing live über das interaktive Cockpit an.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex rounded-xl border border-border/60 bg-card/45 backdrop-blur-md p-1 self-start">
|
|
{(["cockpit", "discover"] as const).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
className={cn(
|
|
"rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
|
|
tab === t
|
|
? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{t === "cockpit" ? "Cockpit" : "Modelle finden"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<JobsBar />
|
|
|
|
<div className="transition-all duration-300">
|
|
{tab === "cockpit" ? <Cockpit /> : <Discover />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|