refactor: improve deprecation block

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -20,14 +20,18 @@ export function ExampleBlock({
 
 export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element {
 	return (
-		<div className="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">Deprecated</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">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>