Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-15 11:03:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: docs design (#8487)

Browse Source
This commit is contained in:
Noel
2022-08-15 14:48:00 +02:00
committed by GitHub
parent d09ef1e425
commit 4ab1d09997
44 changed files with 1533 additions and 1251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/website/src/components/MethodItem.tsx
View File

@@ -1,4 +1,4 @@
import { FiLink } from 'react-icons/fi';
import { Group, Stack, Title } from '@mantine/core';
import { CommentSection } from './Comment';
import { HyperlinkedText } from './HyperlinkedText';
import { ParameterTable } from './ParameterTable';
@@ -7,10 +7,6 @@ import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
type MethodResolvable = ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>;
export interface MethodItemProps {
data: MethodResolvable;
}
function getShorthandName(data: MethodResolvable) {
return `${data.name}(${data.parameters.reduce((prev, cur, index) => {
if (index === 0) {
@@ -21,37 +17,24 @@ function getShorthandName(data: MethodResolvable) {
}, '')})`;
}
function onAnchorClick() {
console.log('anchor clicked');
// Todo implement jump-to links
}
export function MethodItem({ data }: MethodItemProps) {
export function MethodItem({ data }: { data: MethodResolvable }) {
return (
<div className="flex flex-col">
<div className="flex">
<button
type="button"
className="bg-transparent border-none cursor-pointer dark:text-white"
title="Anchor"
onClick={onAnchorClick}
>
<FiLink size={16} />
</button>
<div className="flex flex-col">
<div className="w-full flex flex-row gap-3">
<h4 className="font-mono m-0 break-all">{`${getShorthandName(data)}`}</h4>
<h4 className="m-0">:</h4>
<h4 className="font-mono m-0 break-all">
<Stack>
<Group>
<Stack>
<Group>
<Title order={5} className="font-mono break-all">{`${getShorthandName(data)}`}</Title>
<Title order={5}>:</Title>
<Title order={5} className="font-mono break-all">
<HyperlinkedText tokens={data.returnTypeTokens} />
</h4>
</div>
</div>
</div>
<div className="mx-7 mb-5">
{data.summary && <CommentSection textClassName="text-dark-100 dark:text-gray-300" node={data.summary} />}
</Title>
</Group>
</Stack>
</Group>
<Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg">
{data.summary ? <CommentSection node={data.summary} /> : null}
{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
</div>
</div>
</Group>
</Stack>
);
}