feat(shared): Updated MDX components

sites/shared/components/mdx/index.js

@@ -6,48 +6,8 @@ import ReadMore from './read-more.js'
 import { Tab, Tabs } from './tabs.js'
 import Example from './example.js'
 import Examples from './examples.js'
-
-const methodClasses = {
-  get: 'bg-green-600 text-white',
-  post: 'bg-sky-600 text-white',
-  put: 'bg-orange-500 text-white',
-  delete: 'bg-red-600 text-white',
-}
-
-const Method = (props) => {
-  let method = false
-  for (const m in methodClasses) {
-    if (!method && props[m]) method = m.toUpperCase()
-  }
-
-  return (
-    <div
-      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
-        methodClasses[method.toLowerCase()]
-      }`}
-    >
-      {method}
-    </div>
-  )
-}
-
-const statusClasses = {
-  2: 'bg-green-600 text-white',
-  4: 'bg-orange-500 text-white',
-  5: 'bg-red-600 text-white',
-}
-
-const StatusCode = ({ status }) => {
-  return (
-    <div
-      className={`my-1 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full ${
-        statusClasses['' + status.slice(0, 1)]
-      }`}
-    >
-      {status}
-    </div>
-  )
-}
+import Method from './http-method.js'
+import StatusCode from './status-code.js'
 
 const mdxCustomComponents = (app = false) => ({
   // Custom components