feat: web-components (#8715)

packages/guide/src/components/Section.tsx

@@ -1,50 +0,0 @@
-import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/disclosure';
-import type { PropsWithChildren } from 'react';
-import { VscChevronDown } from 'react-icons/vsc';
-
-export function Section({
-	title,
-	icon,
-	padded = false,
-	dense = false,
-	defaultClosed = false,
-	background = false,
-	gutter = false,
-	children,
-}: PropsWithChildren<{
-	background?: boolean;
-	defaultClosed?: boolean;
-	dense?: boolean;
-	gutter?: boolean;
-	icon?: JSX.Element;
-	padded?: boolean;
-	title: string;
-}>) {
-	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
-
-	return (
-		<div className="flex flex-col">
-			<Disclosure
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
-				state={disclosure}
-			>
-				<div className="flex flex-row place-content-between place-items-center">
-					<div className="flex flex-row place-items-center gap-3">
-						{icon ?? null}
-						<span className="font-semibold">{title}</span>
-					</div>
-					<VscChevronDown
-						className={`transform transition duration-150 ease-in-out ${disclosure.open ? 'rotate-180' : 'rotate-0'}`}
-						size={20}
-					/>
-				</div>
-			</Disclosure>
-			<DisclosureContent
-				className={`${background ? 'bg-light-700 dark:bg-dark-500 rounded' : ''} ${gutter ? 'mt-2' : ''}`}
-				state={disclosure}
-			>
-				{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
-			</DisclosureContent>
-		</div>
-	);
-}

packages/guide/src/components/SidebarItems.tsx

@@ -1,5 +1,5 @@
+import { Section } from '@discordjs/ui';
 import type { MDXInstance } from 'astro';
-import { Section } from './Section.jsx';
 
 export type MDXPage = MDXInstance<{ category: string; title: string }>;
 

packages/guide/src/pages/creating-your-bot/index.mdx

@@ -4,12 +4,12 @@ title: Initial files
 category: Creating your bot
 ---
 
+import { CH } from '@code-hike/mdx/components';
+import { Section } from '@discordjs/ui';
 import { Tip } from '../../components/Tip.jsx';
 import { Caution } from '../../components/Caution.jsx';
 import { DocsLink } from '../../components/DocsLink.jsx';
 import { ResultingCode } from '../../components/ResultingCode.jsx';
-import { CH } from '@code-hike/mdx/components';
-import { Section } from '../../components/Section.jsx';
 
 # Initial files
 
@@ -119,7 +119,7 @@ console.log(process.env.DISCORD_TOKEN);
 	`.gitignore`](/creating-your-bot/#git-and-gitignore).
 </Caution>
 
-<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded dense background gutter>
+<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
 While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
 
 - Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)