mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-17 20:13:30 +01:00
refactor: docs (#10126)
This commit is contained in:
Noel
@@ -1,32 +1,135 @@
|
||||
'use client';
|
||||
import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
|
||||
import { VscSymbolEvent } from '@react-icons/all-files/vsc/VscSymbolEvent';
|
||||
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
|
||||
import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { Fragment } from 'react';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/Collapsible';
|
||||
|
||||
import { useOutline } from '~/contexts/outline';
|
||||
import { Scrollbars } from './Scrollbars';
|
||||
import { TableOfContentItems } from './TableOfContentItems';
|
||||
export async function Outline({ node }: { readonly node: any }) {
|
||||
const hasAny = node.members?.properties?.length || node.members?.events?.length || node.members?.methods?.length;
|
||||
|
||||
export function Outline() {
|
||||
const { members } = useOutline();
|
||||
return hasAny ? (
|
||||
<Collapsible className="flex flex-col gap-8" defaultOpen>
|
||||
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
|
||||
<h2 className="flex place-items-center gap-2 text-xl font-bold">
|
||||
<VscListSelection aria-hidden className="flex-shrink-0" size={24} /> Table of contents
|
||||
</h2>
|
||||
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
|
||||
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
|
||||
</CollapsibleTrigger>
|
||||
|
||||
if (!members) {
|
||||
return null;
|
||||
}
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{node.members?.properties?.length ? (
|
||||
<Collapsible className="flex flex-col gap-4 px-4" defaultOpen>
|
||||
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
|
||||
<h2 className="flex place-items-center gap-2 text-xl font-bold">
|
||||
<VscSymbolProperty aria-hidden className="flex-shrink-0" size={24} />
|
||||
Properties
|
||||
</h2>
|
||||
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
|
||||
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
|
||||
</CollapsibleTrigger>
|
||||
|
||||
return (
|
||||
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
|
||||
<aside className="fixed bottom-4 left-4 right-4 top-22 z-20 mx-auto hidden max-w-5xl border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md lg:sticky lg:block lg:h-full lg:max-w-xs lg:min-w-xs lg:w-full dark:border-dark-100 dark:bg-dark-600/75">
|
||||
<Scrollbars
|
||||
autoHide
|
||||
className="[&>div]:overscroll-none"
|
||||
hideTracksWhenNotNeeded
|
||||
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
|
||||
renderTrackVertical={(props) => (
|
||||
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
|
||||
)}
|
||||
universal
|
||||
>
|
||||
<TableOfContentItems serializedMembers={members} />
|
||||
</Scrollbars>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
{node.members.properties.map((property: any, idx: number) => {
|
||||
return (
|
||||
<Fragment key={`${property.displayName}-${idx}`}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex place-content-between place-items-center">
|
||||
<Link
|
||||
href={`#${property.displayName}`}
|
||||
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
|
||||
>
|
||||
{property.displayName}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : null}
|
||||
|
||||
{node.members?.events?.length ? (
|
||||
<Collapsible className="flex flex-col gap-4 px-4" defaultOpen>
|
||||
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
|
||||
<h2 className="flex place-items-center gap-2 text-xl font-bold">
|
||||
<VscSymbolEvent aria-hidden className="flex-shrink-0" size={24} />
|
||||
Events
|
||||
</h2>
|
||||
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
|
||||
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
{node.members.events.map((event: any, idx: number) => {
|
||||
return (
|
||||
<Fragment key={`${event.displayName}-${idx}`}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex place-content-between place-items-center">
|
||||
<Link
|
||||
href={`#${event.displayName}`}
|
||||
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
|
||||
>
|
||||
{event.displayName}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : null}
|
||||
|
||||
{node.members?.methods?.length ? (
|
||||
<Collapsible className="flex flex-col gap-4 px-4" defaultOpen>
|
||||
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
|
||||
<h2 className="flex place-items-center gap-2 text-xl font-bold">
|
||||
<VscSymbolMethod aria-hidden className="flex-shrink-0" size={24} />
|
||||
Methods
|
||||
</h2>
|
||||
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
|
||||
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
{node.members.methods.map((method: any, idx: number) => {
|
||||
return (
|
||||
<Fragment key={`${method.displayName}-${idx}`}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex place-content-between place-items-center">
|
||||
<Link
|
||||
href={`#${method.displayName}`}
|
||||
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
|
||||
>
|
||||
{method.displayName}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : null}
|
||||
</div>
|
||||
<div aria-hidden className="px-4">
|
||||
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user