80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
import Popout from '../popout.js'
|
|
import Highlight from './highlight.js'
|
|
import YouTube from './youtube.js'
|
|
import Figure from './figure.js'
|
|
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>
|
|
)
|
|
}
|
|
|
|
const mdxCustomComponents = (app = false) => ({
|
|
// Custom components
|
|
Method,
|
|
StatusCode,
|
|
Comment: (props) => <Popout {...props} comment />,
|
|
Fixme: (props) => <Popout {...props} fixme />,
|
|
Link: (props) => <Popout {...props} link />,
|
|
Note: (props) => <Popout {...props} note />,
|
|
ReadMore: (props) => <ReadMore {...props} app={app} slug={app.slug} />,
|
|
Related: (props) => <Popout {...props} related />,
|
|
Tip: (props) => <Popout {...props} tip />,
|
|
Warning: (props) => <Popout {...props} warning />,
|
|
YouTube,
|
|
pre: (props) => <Highlight {...props} />,
|
|
img: Figure,
|
|
table: (props) => (
|
|
<table {...props} className="mdx-table table-auto w-full">
|
|
{props.children}
|
|
</table>
|
|
),
|
|
Tab,
|
|
Tabs,
|
|
Example: (props) => <Example {...props} app={app} />,
|
|
Examples: (props) => <Examples {...props} app={app} />,
|
|
})
|
|
|
|
export default mdxCustomComponents
|
|
|
|
//<span className="bg-secondary px-2 mx-1 rounded text-primary-content bg-opacity-80">{children}</span>
|