components/MDX/ConfigOption.tsx

import { Tooltip } from "@mui/material";
import Link from "next/link";
import { Fragment, ReactNode, type FC } from "react";

type ConfigOptionProps = {
    as: FC | keyof JSX.IntrinsicElements;
    optionKey: string;
    type: ReactNode;
    children: ReactNode;
    optional?: boolean;
    defaultValue?: string;
};

export function ConfigOption({
    as: Element = "div",
    type,
    optionKey,
    children,
    optional,
    defaultValue,
}: ConfigOptionProps) {
    return (
        <Element className="bg-gray-50 dark:bg-[rgba(255,255,255,0.08)] p-2 rounded-lg block my-4 relative">
            <div className="font-bold md:text-lg mb-3 flex justify-between items-center not-prose">
                <div className="flex items-start">
                    <span>
                        <code className="text-blue-400">{optionKey}</code>
                        <code>{optional ? "?:" : ":"}</code>
                    </span>
                    <div className="ml-2 inline-block px-1 rounded-lg bg-gray-200 dark:bg-[#333]">
                        {typeof type === "string" ? (
                            <code className="text-teal-400">{type}</code>
                        ) : (
                            <code>{type}</code>
                        )}
                    </div>
                </div>
                <div>
                    {defaultValue && (
                        <div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] hidden md:inline-block font-normal text-sm md:text-base">
                            Default:{" "}
                            <code className="font-normal text-[#999]">
                                {defaultValue}
                            </code>
                        </div>
                    )}
                    {optional && (
                        <div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] ml-2 hidden md:inline-block">
                            <span className="font-normal text-sm md:text-base text-[#999]">
                                Optional
                            </span>
                        </div>
                    )}
                </div>
            </div>
            <div className="text-sm dark:text-[#aaa]">{children}</div>
            <div className="md:hidden">
                {defaultValue && (
                    <div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] inline-block font-normal text-sm md:text-base mr-2 py-0.5">
                        Default:{" "}
                        <code className="font-normal text-[#999]">
                            {defaultValue}
                        </code>
                    </div>
                )}

                {optional && (
                    <div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] inline-block font-normal text-sm md:text-base mr-2 py-0.5">
                        <span className="font-normal text-sm md:text-base text-[#999]">
                            Optional
                        </span>
                    </div>
                )}
            </div>
        </Element>
    );
}

export namespace ConfigOption {
    const Union = ({ children }: { children: ReactNode[] }) => (
        <span>
            {children.map((type, index) =>
                children.length > 3 ? (
                    <Fragment key={index}>
                        <span className="mx-2">|</span>
                        {type}
                        <br />
                    </Fragment>
                ) : (
                    <Fragment key={index}>
                        {index > 0 && <span className="mx-2">|</span>}
                        {type}
                    </Fragment>
                ),
            )}
        </span>
    );

    const StringLiteral = (
        props: { value: ReactNode } | { children: ReactNode },
    ) => (
        <span className="text-yellow-600">
            &quot;{"value" in props ? props.value : props.children}&quot;
        </span>
    );

    const ArrayLiteral = ({ children }: { children: ReactNode }) => (
        <>
            <span>
                {Array.isArray(children) ? <>({children})</> : children}
            </span>
            <span className="text-blue-500">[]</span>
        </>
    );

    const Identifier = ({
        children,
        url,
    }: {
        children: ReactNode;
        url?: string;
    }) => (
        <span className="text-teal-400">
            {url ? (
                <Tooltip title="Click to go the definition of this type">
                    <Link href={url} target="_blank" rel="noreferrer">
                        {children}
                    </Link>
                </Tooltip>
            ) : (
                children
            )}
        </span>
    );

    function Null() {
        return <Identifier>null</Identifier>;
    }

    function TupleLiteral({ children }: { children: ReactNode[] }) {
        return (
            <>
                <span className="text-blue-500">[</span>
                {children.map((child, index) => (
                    <Fragment key={index}>
                        {index > 0 && <span className="mr-2">,</span>}
                        {child}
                    </Fragment>
                ))}
                <span className="text-blue-500">]</span>
            </>
        );
    }

    function GenericIdentifier({
        children,
        url,
        genericTypes,
    }: {
        genericTypes: ReactNode[];
        children: ReactNode;
        url?: string;
    }) {
        return (
            <span className="text-teal-400">
                {url ? (
                    <Tooltip title="Click to go the definition of this type">
                        <Link href={url} target="_blank" rel="noreferrer">
                            {children}
                        </Link>
                    </Tooltip>
                ) : (
                    children
                )}
                <span className="text-blue-500">&lt;</span>
                {genericTypes.map((type, index) => (
                    <Fragment key={index}>
                        {index > 0 && <span className="mr-2">,</span>}
                        {type}
                    </Fragment>
                ))}
                <span className="text-blue-500">&gt;</span>
            </span>
        );
    }

    export const Types = {
        Union,
        StringLiteral,
        ArrayLiteral,
        Identifier,
        Null,
        TupleLiteral,
        GenericIdentifier,
    };
}
1	rakinar2	575	import { Tooltip } from "@mui/material";
2			import Link from "next/link";
3			import { Fragment, ReactNode, type FC } from "react";
4
5			type ConfigOptionProps = {
6			as: FC \| keyof JSX.IntrinsicElements;
7			optionKey: string;
8			type: ReactNode;
9			children: ReactNode;
10			optional?: boolean;
11			defaultValue?: string;
12			};
13
14			export function ConfigOption({
15			as: Element = "div",
16			type,
17			optionKey,
18			children,
19			optional,
20			defaultValue,
21			}: ConfigOptionProps) {
22			return (
23			<Element className="bg-gray-50 dark:bg-[rgba(255,255,255,0.08)] p-2 rounded-lg block my-4 relative">
24			<div className="font-bold md:text-lg mb-3 flex justify-between items-center not-prose">
25			<div className="flex items-start">
26			<span>
27			<code className="text-blue-400">{optionKey}</code>
28			<code>{optional ? "?:" : ":"}</code>
29			</span>
30			<div className="ml-2 inline-block px-1 rounded-lg bg-gray-200 dark:bg-[#333]">
31			{typeof type === "string" ? (
32			<code className="text-teal-400">{type}</code>
33			) : (
34			<code>{type}</code>
35			)}
36			</div>
37			</div>
38			<div>
39			{defaultValue && (
40			<div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] hidden md:inline-block font-normal text-sm md:text-base">
41			Default:{" "}
42			<code className="font-normal text-[#999]">
43			{defaultValue}
44			</code>
45			</div>
46			)}
47			{optional && (
48			<div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] ml-2 hidden md:inline-block">
49			<span className="font-normal text-sm md:text-base text-[#999]">
50			Optional
51			</span>
52			</div>
53			)}
54			</div>
55			</div>
56			<div className="text-sm dark:text-[#aaa]">{children}</div>
57			<div className="md:hidden">
58			{defaultValue && (
59			<div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] inline-block font-normal text-sm md:text-base mr-2 py-0.5">
60			Default:{" "}
61			<code className="font-normal text-[#999]">
62			{defaultValue}
63			</code>
64			</div>
65			)}
66
67			{optional && (
68			<div className="px-2 rounded-lg bg-gray-200 dark:bg-[#333] inline-block font-normal text-sm md:text-base mr-2 py-0.5">
69			<span className="font-normal text-sm md:text-base text-[#999]">
70			Optional
71			</span>
72			</div>
73			)}
74			</div>
75			</Element>
76			);
77			}
78
79			export namespace ConfigOption {
80			const Union = ({ children }: { children: ReactNode[] }) => (
81			<span>
82			{children.map((type, index) =>
83			children.length > 3 ? (
84			<Fragment key={index}>
85			<span className="mx-2">\|</span>
86			{type}
87			<br />
88			</Fragment>
89			) : (
90			<Fragment key={index}>
91			{index > 0 && <span className="mx-2">\|</span>}
92			{type}
93			</Fragment>
94			),
95			)}
96			</span>
97			);
98
99			const StringLiteral = (
100			props: { value: ReactNode } \| { children: ReactNode },
101			) => (
102			<span className="text-yellow-600">
103			"{"value" in props ? props.value : props.children}"
104			</span>
105			);
106
107			const ArrayLiteral = ({ children }: { children: ReactNode }) => (
108			<>
109			<span>
110			{Array.isArray(children) ? <>({children})</> : children}
111			</span>
112			<span className="text-blue-500">[]</span>
113			</>
114			);
115
116			const Identifier = ({
117			children,
118			url,
119			}: {
120			children: ReactNode;
121			url?: string;
122			}) => (
123			<span className="text-teal-400">
124			{url ? (
125			<Tooltip title="Click to go the definition of this type">
126			<Link href={url} target="_blank" rel="noreferrer">
127			{children}
128			</Link>
129			</Tooltip>
130			) : (
131			children
132			)}
133			</span>
134			);
135
136			function Null() {
137			return <Identifier>null</Identifier>;
138			}
139
140			function TupleLiteral({ children }: { children: ReactNode[] }) {
141			return (
142			<>
143			<span className="text-blue-500">[</span>
144			{children.map((child, index) => (
145			<Fragment key={index}>
146			{index > 0 && <span className="mr-2">,</span>}
147			{child}
148			</Fragment>
149			))}
150			<span className="text-blue-500">]</span>
151			</>
152			);
153			}
154
155			function GenericIdentifier({
156			children,
157			url,
158			genericTypes,
159			}: {
160			genericTypes: ReactNode[];
161			children: ReactNode;
162			url?: string;
163			}) {
164			return (
165			<span className="text-teal-400">
166			{url ? (
167			<Tooltip title="Click to go the definition of this type">
168			<Link href={url} target="_blank" rel="noreferrer">
169			{children}
170			</Link>
171			</Tooltip>
172			) : (
173			children
174			)}
175			<span className="text-blue-500"><</span>
176			{genericTypes.map((type, index) => (
177			<Fragment key={index}>
178			{index > 0 && <span className="mr-2">,</span>}
179			{type}
180			</Fragment>
181			))}
182			<span className="text-blue-500">></span>
183			</span>
184			);
185			}
186
187			export const Types = {
188			Union,
189			StringLiteral,
190			ArrayLiteral,
191			Identifier,
192			Null,
193			TupleLiteral,
194			GenericIdentifier,
195			};
196			}