83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import BrowserOnly from "@docusaurus/BrowserOnly";
|
|
|
|
import {
|
|
BundledCustomWidgetGalleryClient,
|
|
CanonicalCustomWidgetExampleClient,
|
|
CustomWidgetCodeInputClient,
|
|
CustomWidgetCodeExampleClient,
|
|
} from "./custom-widget-code-client";
|
|
|
|
export interface CustomWidgetCodeExampleProps {
|
|
id: string;
|
|
label: string;
|
|
code: string;
|
|
language?: "json" | "jsx";
|
|
height?: string;
|
|
}
|
|
|
|
export interface CustomWidgetCodeInputProps {
|
|
id: string;
|
|
label: string;
|
|
value: string;
|
|
onChange(value: string): void;
|
|
language: "json" | "css";
|
|
description?: string;
|
|
placeholder?: string;
|
|
height?: string;
|
|
required?: boolean;
|
|
maxLength?: number;
|
|
}
|
|
|
|
export interface CanonicalCustomWidgetExampleProps {
|
|
id: string;
|
|
label: string;
|
|
example: "requests" | "options";
|
|
height?: string;
|
|
}
|
|
|
|
export function CanonicalCustomWidgetExample(props: CanonicalCustomWidgetExampleProps) {
|
|
return (
|
|
<BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
|
|
{() => <CanonicalCustomWidgetExampleClient {...props} />}
|
|
</BrowserOnly>
|
|
);
|
|
}
|
|
|
|
export function CustomWidgetCodeExample(props: CustomWidgetCodeExampleProps) {
|
|
return (
|
|
<BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
|
|
{() => <CustomWidgetCodeExampleClient {...props} />}
|
|
</BrowserOnly>
|
|
);
|
|
}
|
|
|
|
export function CustomWidgetCodeInput(props: CustomWidgetCodeInputProps) {
|
|
return (
|
|
<BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
|
|
{() => <CustomWidgetCodeInputClient {...props} />}
|
|
</BrowserOnly>
|
|
);
|
|
}
|
|
|
|
export function BundledCustomWidgetGallery() {
|
|
return (
|
|
<BrowserOnly fallback={<CodeExampleFallback height="520px" />}>
|
|
{() => <BundledCustomWidgetGalleryClient />}
|
|
</BrowserOnly>
|
|
);
|
|
}
|
|
|
|
function CodeExampleFallback({ height }: { height?: string }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: height ?? "220px",
|
|
border: "1px solid var(--ifm-color-emphasis-300)",
|
|
borderRadius: "var(--ifm-global-radius)",
|
|
background: "var(--ifm-background-surface-color)",
|
|
}}
|
|
aria-busy="true"
|
|
/>
|
|
);
|
|
}
|