From 605130c7db029b693f4cd997d303dfe60df3b72e Mon Sep 17 00:00:00 2001
From: pascal-fischer <32096965+pascal-fischer@users.noreply.github.com>
Date: Wed, 10 Jan 2024 13:53:51 +0100
Subject: [PATCH] add badge for deprecated api endpoints to the template (#126)

---
 generator/templates/ApiTemplate.ts |  2 +-
 src/components/Badge.jsx           | 22 ++++++++++++++++++++++
 src/components/mdx.jsx             |  1 +
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Badge.jsx

diff --git a/generator/templates/ApiTemplate.ts b/generator/templates/ApiTemplate.ts
index e35a7c81..a1405108 100644
--- a/generator/templates/ApiTemplate.ts
+++ b/generator/templates/ApiTemplate.ts
@@ -4,7 +4,7 @@ export const title = '<%- tag %>'
 
 <% operations.forEach(function(operation){ %>
 
-## <%- operation.summary %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }}
+## <%- operation.summary %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }} <% if(operation.deprecated) { %><Badge status="warning" text="Deprecated" /><% } %>
 
 <Row>
   <Col>
diff --git a/src/components/Badge.jsx b/src/components/Badge.jsx
new file mode 100644
index 00000000..71e6c3cb
--- /dev/null
+++ b/src/components/Badge.jsx
@@ -0,0 +1,22 @@
+export function Badge({ status, text }) {
+    const getStatusStyles = (status) => {
+        switch (status) {
+            case 'info':
+                // Never tested colors
+                return 'bg-blue-300/30 text-blue-400 dark:bg-blue-400/10 dark:text-blue-400';
+            case 'warning':
+                return 'bg-orange-300/30 text-orange-400 dark:bg-yellow-600/10 dark:text-yellow-600';
+            case 'error':
+                // Never tested colors
+                return 'bg-red-300/30 text-red-400 dark:bg-red-400/10 dark:text-red-400';
+            default:
+                return 'bg-gray-500/30 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400';
+        }
+    };
+
+    const baseStyle = 'rounded-md py-0.5 px-2 text-sm';
+
+    const statusStyle = getStatusStyles(status);
+
+    return <span className={`${baseStyle} ${statusStyle}`}>{text}</span>;
+}
diff --git a/src/components/mdx.jsx b/src/components/mdx.jsx
index 3d81159f..4397f0d4 100644
--- a/src/components/mdx.jsx
+++ b/src/components/mdx.jsx
@@ -6,6 +6,7 @@ import { Heading } from '@/components/Heading'
 export const a = Link
 export { Button } from '@/components/Button'
 export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
+export { Badge } from '@/components/Badge'
 
 export const h2 = function H2(props) {
   return <Heading level={2} {...props} />