-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
CodeListing.tsx
82 lines (80 loc) · 2.62 KB
/
CodeListing.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
import type { PropsWithChildren } from 'react';
import { FiLink } from 'react-icons/fi';
import { HyperlinkedText } from './HyperlinkedText';
import { InheritanceText } from './InheritanceText';
import { TSDoc } from './tsdoc/TSDoc';
export enum CodeListingSeparatorType {
Type = ':',
Value = '=',
}
export function CodeListing({
name,
separator = CodeListingSeparatorType.Type,
typeTokens,
readonly = false,
optional = false,
summary,
children,
comment,
deprecation,
inheritanceData,
}: PropsWithChildren<{
comment?: AnyDocNodeJSON | null;
deprecation?: AnyDocNodeJSON | null;
inheritanceData?: InheritanceData | null;
name: string;
optional?: boolean;
readonly?: boolean;
separator?: CodeListingSeparatorType;
summary?: ApiItemJSON['summary'];
typeTokens: TokenDocumentation[];
}>) {
return (
<div id={name} className="scroll-mt-30 flex flex-col gap-4">
<div className={`md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2`}>
<a className="hidden md:inline-block" href={`#${name}`}>
<FiLink size={20} />
</a>
{deprecation || readonly || optional ? (
<div className="flex flex-row flex-wrap gap-1">
{deprecation ? (
<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{readonly ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{optional ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}
</div>
) : null}
<div className="flex flex-row flex-wrap place-items-center gap-1">
<h4 className="break-all font-mono text-lg font-bold">
{name}
{optional ? '?' : ''}
</h4>
<h4 className="font-mono text-lg font-bold">{separator}</h4>
<h4 className="break-all font-mono text-lg font-bold">
<HyperlinkedText tokens={typeTokens} />
</h4>
</div>
</div>
{summary || inheritanceData ? (
<div className="flex flex-col gap-4">
{deprecation ? <TSDoc node={deprecation} /> : null}
{summary ? <TSDoc node={summary} /> : null}
{comment ? <TSDoc node={comment} /> : null}
{inheritanceData ? <InheritanceText data={inheritanceData} /> : null}
{children}
</div>
) : null}
</div>
);
}