add badge for deprecated api endpoints to the template (#126)

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>;
+}

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} />