File size: 2,033 Bytes
f54e377 |
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 64 65 |
import React from "react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronDown, ChevronRight } from "lucide-react";
import { Provider } from "@/App";
interface Props {
data: Provider[];
expanded: string[];
comparisonModels: string[];
onToggleExpand: (provider: string) => void;
onChangeModel: (value: string, checked: boolean) => void;
}
export const ComparisonSelector: React.FC<Props> = ({
data,
expanded,
comparisonModels,
onToggleExpand,
onChangeModel,
}) => (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{data.map((provider) => (
<Collapsible
key={provider.provider}
open={expanded.includes(provider.provider)}
onOpenChange={() => onToggleExpand(provider.provider)}
>
<CollapsibleTrigger asChild>
<Button variant="outline" className="w-full justify-between">
{provider.provider}
{expanded.includes(provider.provider) ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="mt-2">
{provider.models.map((model) => {
const id = `${provider.provider}:${model.name}`;
return (
<div key={id} className="flex items-center space-x-2 mb-1">
<Checkbox
id={id}
checked={comparisonModels.includes(id)}
onCheckedChange={(checked) => onChangeModel(id, !!checked)}
/>
<label htmlFor={id} className="text-sm font-medium text-gray-700">
{model.name}
</label>
</div>
);
})}
</CollapsibleContent>
</Collapsible>
))}
</div>
);
|