Add DownloadOasButton component

components/DownloadOasButton/DownloadOasButton.mdx

@@ -0,0 +1,58 @@
+---
+title: "DownloadOasButton"
+description: "Button for downloading the OpenAPI file."
+author: "@olehshh"
+version: "1.0.0"
+---
+
+export const DownloadOasButton = ({ url }) => {
+  const getFileNameFromUrl = (link) => {
+    try {
+      const pathname = new URL(link).pathname;
+      return pathname.split('/').pop() || 'openapi.json';
+    } catch {
+      return 'openapi.json';
+    }
+  };
+
+  const handleDownload = async () => {
+    const fileName = getFileNameFromUrl(url);
+
+    try {
+      const res = await fetch(url, { mode: 'cors' });
+      if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
+
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = objectUrl;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.error('Failed to download file:', err);
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      className="
+        flex items-center gap-3 px-6 py-3
+        bg-[#6BA539] hover:bg-[#5a8f30]
+        text-white font-semibold rounded-full
+        shadow-md hover:shadow-lg
+        transform hover:scale-105 transition duration-300
+      "
+    >
+      <span>Download OpenAPI Spec</span>
+    </button>
+  );
+};
+
+<DownloadOasButton url="https://demo-url.readme.io/openapi/openapi.json" />

components/DownloadOasButton/readme.md

@@ -0,0 +1,29 @@
+# `<DownloadOasButton/>`
+
+Overview
+
+Add an OpenAPI Download Button to your documentation, allowing users to download your OpenAPI JSON file with one click.
+
+<img alt="OpenAPI Download Button" src="download-oas-button.png" width="800" />
+
+Usage
+
+```mdx
+<DownloadOasButton url="https://your-domain.com/openapi/openapi.json" />
+```
+
+### How to Find Your OpenAPI URL
+
+1. Go to your ReadMe project
+2. In edit mode, navigate to the "API Reference" section and open the "API Definitions" tab
+3. Find the desired definition, click the dropdown next to it, and select "View OAS File"
+4. Copy the URL that appears and add it to the component
+
+#### Make sure your definition is publicly accessible:
+
+- Go to Settings → General
+- In the "OpenAPI Access" section, set "View Permissions" to "Public"
+
+### Props
+
+- `url` (required): The URL to your OpenAPI JSON file