Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-12 09:33:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve tips/warnings

Browse Source
This commit is contained in:
iCrawl
2022-10-07 02:44:28 +02:00
parent f85022162d
commit baa6c69835
5 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/guide/src/components/Caution.tsx
View File

@@ -3,14 +3,18 @@ import { VscWarning } from 'react-icons/vsc';
export function Caution({ children }: PropsWithChildren<{}>) {
return (
<div className="my-4 rounded border border-red-500 p-4">
<div className="flex flex-row place-items-center gap-4">
<span className="text-red-500">
<VscWarning size={20} />
</span>
<div className="flex flex-col gap-2 text-sm">
<span className="font-semibold text-red-500">Caution</span>
{children}
<div className="my-4">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="absolute flex h-full w-full">
<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-red-500" />
<div className="relative border-b-2 border-red-500">
<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
<VscWarning size={20} />
<span className="font-semibold text-red-500">Caution</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-red-500" />
</div>
</div>
</div>

20
packages/guide/src/components/Info.tsx
View File

@@ -3,14 +3,18 @@ import { VscInfo } from 'react-icons/vsc';
export function Info({ children }: PropsWithChildren<{}>) {
return (
<div className="my-4 rounded border border-blue-500 p-4">
<div className="flex flex-row place-items-center gap-4">
<span className="text-blue-500">
<VscInfo size={20} />
</span>
<div className="flex flex-col gap-2 text-sm">
<span className="font-semibold text-blue-500">Info</span>
{children}
<div className="my-4">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="absolute flex h-full w-full">
<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-blue-500" />
<div className="relative border-b-2 border-blue-500">
<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-blue-500">
<VscInfo size={20} />
<span className="font-semibold text-blue-500">Info</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-blue-500" />
</div>
</div>
</div>

9
packages/guide/src/components/Section.tsx
View File

@@ -8,10 +8,14 @@ export function Section({
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;
@@ -35,7 +39,10 @@ export function Section({
/>
</div>
</Disclosure>
<DisclosureContent state={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>

20
packages/guide/src/components/Tip.tsx
View File

@@ -3,14 +3,18 @@ import { VscFlame } from 'react-icons/vsc';
export function Tip({ children }: PropsWithChildren<{}>) {
return (
<div className="my-4 rounded border border-green-500 p-4">
<div className="flex flex-row place-items-center gap-4">
<span className="text-green-500">
<VscFlame size={20} />
</span>
<div className="flex flex-col gap-2 text-sm">
<span className="font-semibold text-green-500">Tip</span>
{children}
<div className="my-4">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="absolute flex h-full w-full">
<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-green-500" />
<div className="relative border-b-2 border-green-500">
<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-green-500">
<VscFlame size={20} />
<span className="font-semibold text-green-500">Tip</span>
</div>
</div>
<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-green-500" />
</div>
</div>
</div>