fix: styling and separation border for enums/interfaces

This commit is contained in:
iCrawl
2022-10-17 23:40:34 +02:00
parent caeb1cbfdb
commit 7083df7cef
2 changed files with 12 additions and 9 deletions

View File

@@ -34,7 +34,7 @@ export function CodeListing({
}>) { }>) {
return ( return (
<div className="scroll-mt-30 flex flex-col gap-4" id={name}> <div className="scroll-mt-30 flex flex-col gap-4" id={name}>
<div className="md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2"> <div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
<a <a
aria-label="Anchor" aria-label="Anchor"
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block" className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
@@ -73,7 +73,7 @@ export function CodeListing({
</div> </div>
</div> </div>
{summary || inheritanceData ? ( {summary || inheritanceData ? (
<div className="flex flex-col gap-4"> <div className="mb-4 flex flex-col gap-4">
{deprecation ? <TSDoc node={deprecation} /> : null} {deprecation ? <TSDoc node={deprecation} /> : null}
{summary ? <TSDoc node={summary} /> : null} {summary ? <TSDoc node={summary} /> : null}
{comment ? <TSDoc node={comment} /> : null} {comment ? <TSDoc node={comment} /> : null}

View File

@@ -1,5 +1,6 @@
import type { ApiEnumJSON } from '@discordjs/api-extractor-utils'; import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
import { Section } from '@discordjs/ui'; import { Section } from '@discordjs/ui';
import { Fragment } from 'react';
import { VscSymbolEnumMember } from 'react-icons/vsc'; import { VscSymbolEnumMember } from 'react-icons/vsc';
import { useMedia } from 'react-use'; import { useMedia } from 'react-use';
import { CodeListing, CodeListingSeparatorType } from '../CodeListing'; import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
@@ -13,13 +14,15 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
<Section dense={matches} icon={<VscSymbolEnumMember size={20} />} padded title="Members"> <Section dense={matches} icon={<VscSymbolEnumMember size={20} />} padded title="Members">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{data.members.map((member) => ( {data.members.map((member) => (
<CodeListing <Fragment key={member.name}>
key={member.name} <CodeListing
name={member.name} name={member.name}
separator={CodeListingSeparatorType.Value} separator={CodeListingSeparatorType.Value}
summary={member.summary} summary={member.summary}
typeTokens={member.initializerTokens} typeTokens={member.initializerTokens}
/> />
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
</Fragment>
))} ))}
</div> </div>
</Section> </Section>