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 (
<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
aria-label="Anchor"
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>
{summary || inheritanceData ? (
<div className="flex flex-col gap-4">
<div className="mb-4 flex flex-col gap-4">
{deprecation ? <TSDoc node={deprecation} /> : null}
{summary ? <TSDoc node={summary} /> : null}
{comment ? <TSDoc node={comment} /> : null}

View File

@@ -1,5 +1,6 @@
import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
import { Section } from '@discordjs/ui';
import { Fragment } from 'react';
import { VscSymbolEnumMember } from 'react-icons/vsc';
import { useMedia } from 'react-use';
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">
<div className="flex flex-col gap-4">
{data.members.map((member) => (
<CodeListing
key={member.name}
name={member.name}
separator={CodeListingSeparatorType.Value}
summary={member.summary}
typeTokens={member.initializerTokens}
/>
<Fragment key={member.name}>
<CodeListing
name={member.name}
separator={CodeListingSeparatorType.Value}
summary={member.summary}
typeTokens={member.initializerTokens}
/>
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
</Fragment>
))}
</div>
</Section>