Spaces:
Sleeping
Sleeping
File size: 2,032 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import { useState } from 'react';
import { Select, SelectItem, Text } from "@tremor/react";
interface ModelData {
team_id: string;
team_name: string;
// Add other properties as needed
}
interface ModelDashboardProps {
modelData: ModelData[];
}
export default function ModelDashboard({ modelData }: ModelDashboardProps) {
const [selectedTeam, setSelectedTeam] = useState<string | null>(null);
const getTeamName = (teamId: string): string => {
const team = modelData.find(item => item.team_id === teamId);
return team?.team_name || 'Unknown Team';
};
return (
<div className="flex flex-col space-y-4">
<div className="flex justify-between items-center mb-6">
<div>
<Text className="text-lg font-medium">Model Management</Text>
<Text className="text-gray-500">Add and manage models for the proxy</Text>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<Text>Filter by Public Model Name:</Text>
<Select
className="w-64"
defaultValue="all"
>
<SelectItem value="all">All Models</SelectItem>
{/* Add model options here */}
</Select>
</div>
<div className="flex items-center gap-2">
<Text>Filter by Team:</Text>
<Select
className="w-64"
value={selectedTeam ?? "all"}
onValueChange={(value) => setSelectedTeam(value === "all" ? null : value)}
>
<SelectItem value="all">All Teams</SelectItem>
{Array.from(new Set(modelData.map(model => model.team_id)))
.filter(teamId => teamId !== null)
.map(teamId => (
<SelectItem key={teamId} value={teamId}>
{getTeamName(teamId)}
</SelectItem>
))}
</Select>
</div>
</div>
</div>
</div>
);
} |