Files
SteelCheck/components/AdminPanel.tsx
T

51 lines
2.0 KiB
TypeScript

import React, { useState } from 'react';
import { AdminCategories } from './AdminCategories';
import { AdminStandards } from './AdminStandards';
import type { AIProvider } from '../types/providers';
interface AdminPanelProps {
apiKey: string;
provider: AIProvider;
model: string;
endpoint?: string;
adminApiKey: string;
adminModel: string;
onAdminConfigSave: (key: string, model: string) => void;
}
export const AdminPanel: React.FC<AdminPanelProps> = (props) => {
const [activeTab, setActiveTab] = useState<'categories' | 'standards'>('categories');
return (
<div className="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8 animate-fade-in">
<div className="mb-8 border-b border-slate-200 dark:border-slate-700">
<div className="flex gap-8">
<button
onClick={() => setActiveTab('categories')}
className={`pb-4 text-sm font-bold transition-all border-b-2 ${
activeTab === 'categories'
? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
: 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
}`}
>
1. Categorias Base
</button>
<button
onClick={() => setActiveTab('standards')}
className={`pb-4 text-sm font-bold transition-all border-b-2 flex items-center gap-2 ${
activeTab === 'standards'
? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
: 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
}`}
>
2. Construtor de Normas IA
<span className="bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 text-[10px] px-2 py-0.5 rounded-full">Beta</span>
</button>
</div>
</div>
{activeTab === 'categories' ? <AdminCategories /> : <AdminStandards {...props} />}
</div>
);
};