refactor: improve deprecation block

This commit is contained in:
iCrawl
2022-10-07 02:45:04 +02:00
parent baa6c69835
commit 103cb16be0

View File

@@ -20,14 +20,18 @@ export function ExampleBlock({
export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element { export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element {
return ( return (
<div className="rounded border border-red-500 p-4"> <div className="my-4">
<div className="flex flex-row place-items-center gap-4"> <div className="relative flex">
<span className="text-red-500"> <div className="p-4">{children}</div>
<VscWarning size={20} /> <div className="absolute flex h-full w-full">
</span> <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="flex flex-col gap-2 text-sm"> <div className="relative border-b-2 border-red-500">
<span className="font-semibold text-red-500">Deprecated</span> <div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
{children} <VscWarning size={20} />
<span className="font-semibold text-red-500">Deprecated</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> </div>
</div> </div>