| 1 |
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 |
} |
Parent Directory
| 
Revision Log