ui(faq): make roles badge-like using MDX, tweak list of roles

src/components/Role/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IRoleProps {
+  color: string
+}
+
+export const Role: FC<IRoleProps> = ({ children, color, ...props }) => {
+  return (
+    <SC.RoleWrapper {...props} color={color}>
+      {children}
+    </SC.RoleWrapper>
+  )
+}