Matt Aitken
9ff4c0dbd5
* Setup project-wide prettier * Remove old workspace file * Remove old debugging directives * New top-level .prettierignore * Updated Prettier config settings * Contrubuting guide: Fix for some bad code blocks * Added more ignores * Improved the format script command * printWidth set to 100 * Formatted entire repo (pnpm run format)
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { Help, Integration } from "~/services/externalApis/types";
|
|
import { InlineCode } from "../code/InlineCode";
|
|
import { Header1 } from "../primitives/Headers";
|
|
import { Paragraph } from "../primitives/Paragraph";
|
|
import { HelpInstall } from "./HelpInstall";
|
|
import { HelpSamples, ReplacementData } from "./HelpSamples";
|
|
|
|
export type HelpPanelIntegration = Pick<Integration, "name" | "packageName" | "identifier">;
|
|
|
|
export type HelpPanelProps = {
|
|
integration: HelpPanelIntegration;
|
|
help?: Help;
|
|
integrationClient?: ReplacementData;
|
|
};
|
|
|
|
export function ApiKeyHelp({ integration, help, integrationClient }: HelpPanelProps) {
|
|
return (
|
|
<div className="mt-4">
|
|
<Header1 className="mb-2">How to use {integration.name} with API keys</Header1>
|
|
<Paragraph spacing>
|
|
You can use API keys to authenticate with {integration.name}. Your API keys won't leave your
|
|
server, we'll never see them.
|
|
</Paragraph>
|
|
<Paragraph spacing>
|
|
First install the <InlineCode>{integration.packageName}</InlineCode> package using your
|
|
preferred package manager. For example:
|
|
</Paragraph>
|
|
<HelpInstall packageName={integration.packageName} />
|
|
{help && (
|
|
<HelpSamples help={help} integration={integration} integrationClient={integrationClient} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|