From d08da8a212fd654673b844e8d46033ae5def9cd2 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Sat, 13 Aug 2022 20:42:03 +0200
Subject: [PATCH] refactor: properly handling spacing

---
 packages/website/src/components/Comment.tsx   |  4 +--
 .../website/src/components/DocContainer.tsx   | 28 +++++++++++--------
 packages/website/src/components/Section.tsx   | 12 +++++++-
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/website/src/components/Comment.tsx b/packages/website/src/components/Comment.tsx
index 33d404a0e..61ab82488 100644
--- a/packages/website/src/components/Comment.tsx
+++ b/packages/website/src/components/Comment.tsx
@@ -16,7 +16,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
 	const createNode = (node: ReturnType<CommentNode['toJSON']>, idx?: number): ReactNode => {
 		switch (node.kind) {
 			case 'PlainText':
-				return <span>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
+				return <span key={idx}>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
 			case 'Paragraph':
 				return (
 					<p key={idx} className={textClassName}>
@@ -24,7 +24,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
 					</p>
 				);
 			case 'SoftBreak':
-				return <br />;
+				return <br key={idx} />;
 			case 'LinkTag': {
 				const { codeDestination, urlDestination, text } = node as ReturnType<LinkTagCommentNode['toJSON']>;
 
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index c35cf85a4..e0dd8ccdf 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -42,24 +42,28 @@ export function DocContainer({
 			</div>
 
 			<div className="min-h-full overflow-y-auto overflow-x-clip px-10 pt-5 pb-10">
-				<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
+				<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white mb-5">
 					{summary ? (
 						<CommentSection textClassName="text-dark-100 dark:text-gray-300" node={summary} />
 					) : (
 						<p className="text-dark-100 dark:text-gray-300">No summary provided.</p>
 					)}
 				</Section>
-				<SyntaxHighlighter
-					wrapLines
-					wrapLongLines
-					language="typescript"
-					style={vscDarkPlus}
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-				>
-					{excerpt}
-				</SyntaxHighlighter>
+				<div className={extendsTokens?.length ? 'mb-2' : 'mb-10'}>
+					<SyntaxHighlighter
+						wrapLines
+						wrapLongLines
+						language="typescript"
+						style={vscDarkPlus}
+						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					>
+						{excerpt}
+					</SyntaxHighlighter>
+				</div>
 				{extendsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white gap-3">
+					<div
+						className={`flex flex-row items-center dark:text-white gap-3 ${implementsTokens?.length ? '' : 'mb-10'}`}
+					>
 						<h3 className="m-0">Extends</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono break-all">
@@ -68,7 +72,7 @@ export function DocContainer({
 					</div>
 				) : null}
 				{implementsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white gap-3">
+					<div className={`flex flex-row items-center dark:text-white gap-3 mb-10`}>
 						<h3 className="m-0">Implements</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono break-all">
diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx
index b61fbdceb..259c22be5 100644
--- a/packages/website/src/components/Section.tsx
+++ b/packages/website/src/components/Section.tsx
@@ -10,6 +10,7 @@ export interface SectionProps {
 	defaultClosed?: boolean;
 	iconElement?: JSX.Element;
 	showSeparator?: boolean;
+	margin?: boolean;
 }
 
 export function Section({
@@ -19,6 +20,7 @@ export function Section({
 	defaultClosed,
 	iconElement,
 	showSeparator = true,
+	margin = true,
 }: SectionProps) {
 	const [collapsed, setCollapsed] = useState(defaultClosed ?? false);
 
@@ -47,8 +49,16 @@ export function Section({
 									height: 'auto',
 									paddingLeft: '1.75rem',
 									paddingRight: '1.75rem',
+									marginBottom: margin ? '1.25rem' : 0,
+								},
+								collapsed: {
+									opacity: 0,
+									height: 0,
+									paddingLeft: '1.75rem',
+									paddingRight: '1.75rem',
+									paddingBottom: 0,
+									marginBottom: 0,
 								},
-								collapsed: { opacity: 0, height: 0, paddingLeft: '1.75rem', paddingRight: '1.75rem', paddingBottom: 0 },
 							}}
 						>
 							{children}