From 7323368124f14567a30cb16f3d445624566b773b Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Sat, 26 Oct 2024 17:21:17 -0300
Subject: [PATCH] update with NucleusBox

---
 src/app/list-techs/list-techs.component.html |  5 ++---
 src/app/list-techs/list-techs.component.scss | 17 +++++++++++++++++
 src/app/list-techs/list-techs.component.ts   | 11 ++++++++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/list-techs/list-techs.component.html b/src/app/list-techs/list-techs.component.html
index b0c4f05..5a4c9ac 100644
--- a/src/app/list-techs/list-techs.component.html
+++ b/src/app/list-techs/list-techs.component.html
@@ -1,5 +1,4 @@
-<div class="content">
-  <h2>List of techs</h2>
+<nucleus-box title="List of techs">
   <input
     class="input-search"
     type="text"
@@ -27,4 +26,4 @@ <h2>List of techs</h2>
       <p>No logos found matching your search.</p>
     </div>
   }
-</div>
+</nucleus-box>
diff --git a/src/app/list-techs/list-techs.component.scss b/src/app/list-techs/list-techs.component.scss
index e69de29..13c35a3 100644
--- a/src/app/list-techs/list-techs.component.scss
+++ b/src/app/list-techs/list-techs.component.scss
@@ -0,0 +1,17 @@
+.input-search {
+  padding: 1rem;
+  margin: 1rem 0;
+  margin-top: 1rem;
+  border-radius: 10px;
+  background: var(--vtl-background);
+  border: 2px solid var(--vtl-background);
+  color: var(--color-text);
+  width: 100%;
+}
+
+.not-found {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/app/list-techs/list-techs.component.ts b/src/app/list-techs/list-techs.component.ts
index aabcaa7..8820e5d 100644
--- a/src/app/list-techs/list-techs.component.ts
+++ b/src/app/list-techs/list-techs.component.ts
@@ -1,13 +1,18 @@
 import { Component, effect, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { AngularTechsLogosModule, Tech, techs } from '../../../projects/angular-techs-logos/src/public-api';
+import { NucleusBox } from 'nucleus-angular';
+import {
+  AngularTechsLogosModule,
+  Tech,
+  techs,
+} from '../../../projects/angular-techs-logos/src/public-api';
 
 @Component({
   selector: 'list-techs',
   standalone: true,
-  imports: [AngularTechsLogosModule, FormsModule],
+  imports: [AngularTechsLogosModule, FormsModule, NucleusBox],
   templateUrl: './list-techs.component.html',
-  styleUrl: './list-techs.component.scss'
+  styleUrl: './list-techs.component.scss',
 })
 export class ListTechsComponent {
   techs: Tech[] = techs;