add nucleus-box

Author: lucasferreiralimax

src/app/example/example.component.html

@@ -1,5 +1,4 @@
-<div class="content">
-  <h2>VoiceCapture Example</h2>
+<nucleus-box title="VoiceCapture Example">
   <div class="content-actions">
     <div class="example-actions">
       <button
@@ -20,9 +19,7 @@ <h2>VoiceCapture Example</h2>
       </button>
     </div>
     <div class="language">
-      <label for="langSelect" class="lang-label"
-        >Choose the language:</label
-      >
+      <label for="langSelect" class="lang-label">Choose the language:</label>
       <select id="langSelect" [(ngModel)]="langSelect" class="lang-select">
         <option value="en">English</option>
         <option value="pt">Portuguese</option>
@@ -47,9 +44,10 @@ <h2>VoiceCapture Example</h2>
     [lang]="langSelect"
     [mode]="modeSelect"
   />
-</div>
+</nucleus-box>
+
 @if(voiceTextTranscript) {
-<div class="content">
+<nucleus-box>
   <div class="input-group">
     <label for="voiceTextArea" class="input-label">
       <h2>Transcript Results</h2>
@@ -61,5 +59,5 @@ <h2>Transcript Results</h2>
       placeholder="Texto do Voice Transcript"
     ></textarea>
   </div>
-</div>
+</nucleus-box>
 }

src/app/example/example.component.scss

@@ -1,7 +1,16 @@
+.content-actions {
+  display: flex;
+  gap: 20px;
+  @media (max-width: 800px) {
+    flex-direction: column;
+  }
+}
+
 .example-actions {
   width: 50%;
   display: flex;
   gap: 20px;
+  margin-top: .5rem;
   @media (max-width: 800px) {
     width: 100%;
   }
@@ -19,6 +28,7 @@
   cursor: pointer;
   min-height: 70px;
   white-space: nowrap;
+  flex: 1;
 
   svg {
     margin-right: 1rem;
@@ -32,6 +42,10 @@
   }
 }
 
+.language {
+  flex: 1;
+}
+
 .lang-label {
   display: block;
   margin-bottom: 10px;

src/app/example/example.component.ts

@@ -1,11 +1,12 @@
 import { Component, signal, WritableSignal } from '@angular/core';
 import { VoiceCapture } from '../../../projects/voicecapture-angular/src/public-api';
 import { FormsModule } from '@angular/forms';
+import { NucleusBox } from 'nucleus-angular';
 
 @Component({
   selector: 'example-voicecapture',
   standalone: true,
-  imports: [VoiceCapture, FormsModule],
+  imports: [VoiceCapture, FormsModule, NucleusBox],
   templateUrl: './example.component.html',
   styleUrl: './example.component.scss',
 })