Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x | import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import { useDebouncedInput } from "../utils/useDebouncedInput"
/**
* Props for the ApiKeyField component
*/
interface ApiKeyFieldProps {
initialValue: string
onChange: (value: string) => void
providerName: string
signupUrl?: string
placeholder?: string
helpText?: string
}
/**
* A reusable component for API key input fields with standard styling and help text for signing up for key
*/
export const ApiKeyField = ({
initialValue,
onChange,
providerName,
signupUrl,
placeholder = "Enter API Key...",
helpText,
}: ApiKeyFieldProps) => {
const [localValue, setLocalValue] = useDebouncedInput(initialValue, onChange)
return (
<div>
<VSCodeTextField
onInput={(e: any) => setLocalValue(e.target.value)}
placeholder={placeholder}
required={true}
style={{ width: "100%" }}
type="password"
value={localValue}>
<span style={{ fontWeight: 500 }}>{providerName} API Key</span>
</VSCodeTextField>
<p
style={{
fontSize: "12px",
marginTop: 3,
color: "var(--vscode-descriptionForeground)",
}}>
{helpText || "This key is stored locally and only used to make API requests from this extension."}
{!localValue && signupUrl && (
<VSCodeLink
href={signupUrl}
style={{
display: "inline",
fontSize: "inherit",
}}>
You can get a{/^[aeiou]/i.test(providerName) ? "n" : ""} {providerName} API key by signing up here.
</VSCodeLink>
)}
</p>
</div>
)
}
|