feat: add a component for github link headers

Author: ericnordelo

content/contracts-cairo/api/access.mdx

@@ -9,9 +9,11 @@ This crate provides ways to restrict who can access the functions of a contract
 
 ## [](#interfaces)Interfaces
 
+<Callout type='info'>
 Starting from version `3.x.x`, the interfaces are no longer part of the `openzeppelin_access` package. The references documented here are contained in the `openzeppelin_interfaces` package version `v2.1.0`.
+</Callout>
 
-### [](#IAccessControl)`IAccessControl`[](https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/interfaces/src/access/accesscontrol.cairo)
+<APIGithubLinkHeader moduleName="IAccessControl" link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/interfaces/src/access/accesscontrol.cairo" />
 
 ```rust
 use openzeppelin_interfaces::accesscontrol::IAccessControl;

src/components/api-github-link-header.tsx

@@ -0,0 +1,11 @@
+export function APIGithubLinkHeader({ moduleName, link }: { moduleName: string; link: string }) {
+  const id = moduleName.toLowerCase().replace(/ /g, "-");
+  return (
+    <div style={{marginTop: "2em"}} className="w-full flex flex-row items-center justify-between">
+      <h2 className="flex scroll-m-28 flex-row items-center gap-2" id={id}><a data-card="" href={`#${id}`} className="peer"><code>{moduleName}</code></a></h2>
+      <a target="_blank" style={{marginTop: "1.5em"}} href={link}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-github-icon lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+      </a>
+    </div>
+  )
+}

src/mdx-components.tsx

@@ -20,12 +20,14 @@ import type { MDXComponents } from "mdx/types";
 import { Mermaid } from "@/components/mdx/mermaid";
 import { openapi } from "@/lib/openapi";
 import OZWizard from "./components/oz-wizard";
+import { APIGithubLinkHeader } from "./components/api-github-link-header";
 
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
 	return {
 		...defaultMdxComponents,
 		OZWizard,
+		APIGithubLinkHeader,
 		FileTextIcon,
 		UsersIcon,
 		ShieldIcon,