byokay-kit
Version:
Byokay Kit lets users bring their own AI API keys and store them securely in their browser. This eliminates the need for your app to manage sensitive credentials or maintain AI API backend infrastructure.
6 lines (5 loc) • 1.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ProviderRow } from "./ProviderRow";
export function ProviderList({ providers, providerNames, keys, saved, validating, validated, validationMessages, isUnverifiedDueToCors, onKeyChange, onValidate, onClear, }) {
return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "grid grid-cols-12 gap-x-2 gap-y-1 mb-2 text-xs text-gray-600 font-medium px-1 md:px-3 py-1.5 border-b border-gray-100", children: [_jsx("div", { className: "col-span-full md:col-span-3", children: "Provider" }), _jsx("div", { className: "col-span-full md:col-span-7" }), _jsx("div", { className: "col-span-full md:col-span-2" })] }), _jsx("div", { className: "space-y-0.5 px-1 md:px-0", children: providers.map((provider) => (_jsx(ProviderRow, { provider: provider, providerDisplayName: providerNames[provider], currentKey: keys[provider] || "", isSaved: saved[provider] || false, isValidating: validating[provider] || false, isValidated: validated[provider] || false, isUnverifiedDueToCors: isUnverifiedDueToCors[provider] || false, validationMessage: validationMessages[provider], onKeyChange: (value) => onKeyChange(provider, value), onValidate: () => onValidate(provider, keys[provider] || ""), onClear: () => onClear(provider) }, provider))) })] }));
}