feat(api): Add api type label to detail page

Author: BrunnerLivio

compiler/api/templates/base.template.html

@@ -1,3 +1,5 @@
-<h1>{$ doc.name $}</h1>
-<label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+<header class="api-header">
+  <h1>{$ doc.name $}</h1>
+  <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+</header>
 {% block body %}{% endblock %}

src/app/homepage/api/api.component.scss

@@ -0,0 +1,27 @@
+@import '../../../scss/variables.scss';
+
+.api-header {
+  display: flex;
+  align-items: center;
+  h1 {
+      // Some spacing to the label
+      margin-right: 20px;
+  }
+}
+
+.api-type-label {
+  border-radius: 2px;
+  color: $white-color;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 2px 10px;
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+    }
+  }
+}