Function OpenAPIPath

packages/react-openapi/src/OpenAPIPath.tsx:9–52

(props: {
    data: OpenAPIOperationData;
    context: OpenAPIUniversalContext;
    /** Whether to show the server URL.
     * @default true
     */
    withServer?: boolean;
    /**
     * Whether the path is copyable.
     * @default true
     */
    canCopy?: boolean;
})

 * Display the path of an operation.
 */
export function OpenAPIPath(props: {
    data: OpenAPIOperationData;
    context: OpenAPIUniversalContext;
    /** Whether to show the server URL.
     * @default true
     */
    withServer?: boolean;
    /**
     * Whether the path is copyable.
     * @default true
     */
    canCopy?: boolean;
}) {
    const { data, context, withServer = true, canCopy = true } = props;
    const { method, path, operation } = data;

    const server = getDefaultServerURL(data.servers);
    const formattedPath = formatPath(path);

    const element = (() => {
        return (
            <>
                {withServer ? <span className="openapi-path-server">{server}</span> : null}
                {formattedPath}
            </>
        );
    })();

    return (
        <div className="openapi-path">
            <div className={`openapi-method openapi-method-${method}`}>{method}</div>

            <OpenAPICopyButton
                value={`${withServer ? server : ''}${path}`}
                className="openapi-path-title"
                data-deprecated={operation.deprecated}
                isDisabled={!canCopy}
                context={getOpenAPIClientContext(context)}
            >
                {element}
            </OpenAPICopyButton>
        </div>
    );
}

/**
 * Format the path by wrapping placeholders in <span> tags.