creating LabelCollab

Author: hfabio

src/components/LabelCollab.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let LabelCollab
+  export let message = 'No text'
+</script>
+
+<style>
+  .label-collab {
+    /* size */
+    display: inline-block;
+    width: var(--size-biggest);
+    height: var(--size-normal);
+    margin: 0 var(--gap-small) 0;
+    box-sizing: border-box;
+
+    /* font configuration */
+    font-family: inherit;
+    line-height: var(--size-normal);
+    font-size: var(--size-subtitle-first);
+    text-transform: uppercase;
+    text-align: center;
+    color: var(--color-floral-white);
+
+    /* box configuration */
+    background-color: var(--color-fiery-rose);
+    border-radius: var(--size-normal);
+  }
+</style>
+
+<label class="label-collab">{message}</label>

src/containers/HeaderCollab.svelte

@@ -1,6 +1,7 @@
 <script>
   import LogoCollab from '../components/LogoCollab.svelte'
   import SearchCollab from '../components/SearchCollab.svelte'
+  import LabelCollab from '../components/LabelCollab.svelte'
 </script>
 
 <style>
@@ -24,6 +25,7 @@
 
 <header class="header-collab">
   <LogoCollab />
-
+  <LabelCollab message="Aula 056" />
+  <LabelCollab />
   <SearchCollab />
 </header>