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;