docs: 📝 Add API overview

apps/docs/src/js/api-helpers.js

@@ -0,0 +1,53 @@
+// Taken from https://github.com/plausible/docs/blob/master/src/js/api-helpers.js 💙
+import React from 'react'
+
+export const Required = () => (
+  <span
+    style={{
+      color: '#ff8e20',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    REQUIRED
+  </span>
+)
+
+export const Optional = () => (
+  <span
+    style={{
+      color: '#718096',
+      fontSize: '0.7rem',
+      fontWeight: 'bold',
+      position: 'relative',
+      bottom: '4px',
+    }}
+  >
+    optional
+  </span>
+)
+
+export const Tag = ({ children, color }) => {
+  let backgroundColor = '#CBD5E0'
+  switch (color) {
+    case 'green':
+      backgroundColor = '#68D391'
+      break
+    case 'orange':
+      backgroundColor = '#ffa54c'
+      break
+  }
+  return (
+    <span
+      style={{
+        backgroundColor,
+        borderRadius: '5px',
+        padding: '0px 5px',
+      }}
+    >
+      {children}
+    </span>
+  )
+}