feat: astro guide (#8714)

packages/guide/src/components/Info.tsx

@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import { VscInfo } from 'react-icons/vsc';
+
+export function Info({ children }: PropsWithChildren<{}>) {
+	return (
+		<div className="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>
+			</div>
+		</div>
+	);
+}