buscador actualizado buscar que quede centrado y acabar bases de datos

src/app/app-routing.module.ts

@@ -7,8 +7,14 @@ import { UPSComponent } from './ups/ups.component';
 import { BlogComponent } from './blog/blog.component';
 import { CelularesComponent } from './products/celulares/celulares.component';
 import { PortatilesComponent } from './products/portatiles/portatiles.component';
+import { OppoComponent } from './products/celulares/oppo/oppo.component';
+import { SamsungComponent } from './products/celulares/samsung/samsung.component';
+import { XiaomiComponent } from './products/celulares/xiaomi/xiaomi.component';
 
 const routes: Routes = [
+  { path: 'products/celulares/xiaomi', component: XiaomiComponent },
+  { path: 'products/celulares/samsung', component: SamsungComponent },
+  { path: 'products/celulares/oppo', component: OppoComponent },
   { path: 'products/portatiles', component: PortatilesComponent },
   { path: 'products/celulares', component: CelularesComponent },
   { path: 'blog', component: BlogComponent },

src/app/app.component.html

@@ -10,6 +10,19 @@
     </h1>
 
     <nav class="navbar" data-navbar [ngClass]="status ? 'active' : ''">
+      <div class="search-header-container">
+  <form (submit)="buscar()" class="search-form">
+    <input
+      type="text"
+      [(ngModel)]="searchTerm"
+      placeholder="Buscar producto..."
+      name="search"
+      class="search-input-header"
+    />
+    <button type="submit" class="search-button-header">Buscar</button>
+  </form>
+</div>
+
       <ul class="navbar-list">
 
         <li class="nav-item">

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { ProductService } from 'src/app/services/product.service';
 
 @Component({
   selector: 'app-root',
@@ -13,5 +15,52 @@ export class AppComponent {
   {
     this.status = !this.status;       
   }
+
+searchTerm = '';
+resultados: any[] = [];
+keywordRutas: { [key: string]: string } = {
+  'samsung': 'products/celulares/samsung',
+  'oppo': 'products/celulares/oppo',
+  'xiaomi': 'products/celulares/xiaomi',
+  'motorola': 'products/celulares',
+  'celular': 'products/celulares',
+  'celulares': 'products/celulares',
+
+  'tv': 'products/televisores',
+  'televisor': 'products/televisores',
+  'televisores': 'products/televisores',
+
+  'portatil': 'products/portatiles',
+  'portátiles': 'products/portatiles',
+  'notebook': 'products/portatiles',
+  'laptop': 'products/portatiles',
+};
+
+constructor(private productService: ProductService, private router: Router) {}
+
+buscar() {
+  const termino = this.searchTerm.trim().toLowerCase();
+
+  // Buscar coincidencia exacta
+  for (const keyword in this.keywordRutas) {
+    if (termino.includes(keyword)) {
+      const ruta = this.keywordRutas[keyword];
+      this.router.navigate([ruta]);
+      return;
+    }
+  }
+
+  // Si no encontró keyword, intentar buscar por productos
+  const resultados = this.productService.search(termino);
+
+  if (resultados.length === 1) {
+    const destino = resultados[0].categoria;
+    this.router.navigate([`products/${destino}`]);
+  } else if (resultados.length > 1) {
+    this.router.navigate(['/resultados'], { queryParams: { q: this.searchTerm } });
+  } else {
+    alert('No se encontraron resultados.');
+  }
+}
 }
 

src/app/app.module.ts

@@ -12,6 +12,9 @@ import { BlogComponent } from './blog/blog.component';
 import { CelularesComponent } from './products/celulares/celulares.component';
 import { PortatilesComponent } from './products/portatiles/portatiles.component';
 import { ProductListComponent } from './components/product-list/product-list.component';
+import { OppoComponent } from './products/celulares/oppo/oppo.component';
+import { SamsungComponent } from './products/celulares/samsung/samsung.component';
+import { XiaomiComponent } from './products/celulares/xiaomi/xiaomi.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +26,10 @@ import { ProductListComponent } from './components/product-list/product-list.com
     BlogComponent,
     CelularesComponent,
     PortatilesComponent,
-    ProductListComponent
+    ProductListComponent,
+    OppoComponent,
+    SamsungComponent,
+    XiaomiComponent
   ],
   imports: [
     BrowserModule,

src/app/components/product-list/product-list.component.ts

@@ -11,7 +11,7 @@ export class ProductListComponent {
   @Input() categoria: string = 'Productos';
 
   currentPage = 1;
-  itemsPerPage = 15;
+  itemsPerPage = 12;
 
   get paginatedProducts() {
     const start = (this.currentPage - 1) * this.itemsPerPage;

src/app/home/home.component.html

@@ -35,17 +35,6 @@
       </div>
     </section>
 
-    <input
-  type="text"
-  [(ngModel)]="searchTerm"
-  placeholder="Buscar producto..."
-/>
-<button (click)="buscar()">Buscar</button>
-
-<router-outlet></router-outlet>
-
-
-
 
   <!--
       - #ABOUT

src/app/home/home.component.ts

@@ -12,9 +12,9 @@ export class HomeComponent {
 searchTerm = '';
 resultados: any[] = [];
 keywordRutas: { [key: string]: string } = {
-  'samsung': 'products/celulares',
-  'oppo': 'products/celulares',
-  'xiaomi': 'products/celulares',
+  'samsung': 'products/celulares/samsung',
+  'oppo': 'products/celulares/oppo',
+  'xiaomi': 'products/celulares/xiaomi',
   'motorola': 'products/celulares',
   'celular': 'products/celulares',
   'celulares': 'products/celulares',

src/app/products/celulares/oppo/oppo.component.html

@@ -0,0 +1,4 @@
+<app-product-list 
+  [productos]="productosOppo" 
+  categoria="Celulares oppo">
+</app-product-list>

src/app/products/celulares/oppo/oppo.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OppoComponent } from './oppo.component';
+
+describe('OppoComponent', () => {
+  let component: OppoComponent;
+  let fixture: ComponentFixture<OppoComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [OppoComponent]
+    });
+    fixture = TestBed.createComponent(OppoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/celulares/oppo/oppo.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ProductService } from 'src/app/services/product.service';
+
+@Component({
+  selector: 'app-oppo',
+  templateUrl: './oppo.component.html',
+  styleUrls: ['./oppo.component.css']
+})
+export class OppoComponent {
+productosOppo: any[] = [];
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.productosOppo = this.productService.getProductosPorCategoria('celulares', 'oppo');
+  }
+}

src/app/products/celulares/samsung/samsung.component.html

@@ -0,0 +1,4 @@
+<app-product-list 
+  [productos]="productosSamsung" 
+  categoria="Celulares Samsung">
+</app-product-list>

src/app/products/celulares/samsung/samsung.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SamsungComponent } from './samsung.component';
+
+describe('SamsungComponent', () => {
+  let component: SamsungComponent;
+  let fixture: ComponentFixture<SamsungComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SamsungComponent]
+    });
+    fixture = TestBed.createComponent(SamsungComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/celulares/samsung/samsung.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ProductService } from 'src/app/services/product.service';
+
+@Component({
+  selector: 'app-samsung',
+  templateUrl: './samsung.component.html',
+  styleUrls: ['./samsung.component.css']
+})
+export class SamsungComponent {
+
+  productosSamsung: any[] = [];
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.productosSamsung = this.productService.getProductosPorCategoria('celulares', 'samsung');
+  }
+
+}

src/app/products/celulares/xiaomi/xiaomi.component.html

@@ -0,0 +1,5 @@
+<app-product-list 
+  [productos]="productosXiaomi" 
+  categoria="Celulares Xiaomi">
+</app-product-list>
+

src/app/products/celulares/xiaomi/xiaomi.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { XiaomiComponent } from './xiaomi.component';
+
+describe('XiaomiComponent', () => {
+  let component: XiaomiComponent;
+  let fixture: ComponentFixture<XiaomiComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [XiaomiComponent]
+    });
+    fixture = TestBed.createComponent(XiaomiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/celulares/xiaomi/xiaomi.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { ProductService } from 'src/app/services/product.service';
+
+@Component({
+  selector: 'app-xiaomi',
+  templateUrl: './xiaomi.component.html',
+  styleUrls: ['./xiaomi.component.css']
+})
+export class XiaomiComponent {
+  productosXiaomi: any[] = [];
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.productosXiaomi = this.productService.getProductosPorCategoria('celulares', 'xiaomi');
+  }
+}

src/styles.css

@@ -15,7 +15,7 @@
     --AJsystem-berry: #ffffff;
     --AJsystem-glow: #5dfff7;
     --AJsystem-blue: #00d7fd;
-    --AJsystem-bkgnd: rgba(0, 0, 0, 60%);
+    --AJsystem-bkgnd: rgba(0, 0, 0, 0.804);
     --AJsystem-disabled-color: hsl(0, 0%, 73%);
     --AJsystem-input-color: hsl(0, 0%, 60%);
     --AJsystem-silver: hsl(0, 0%, 47%);
@@ -366,7 +366,7 @@
     --btn-color: var(--AJsystem-white);
 
     background-color: var(--AJsystem-bkgnd) ;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -396,6 +396,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
   }
 
   .logo {
@@ -1252,7 +1253,7 @@
   }
 
   .footer-top::after {
-    content: url(./assets/images/8cb015bf-0b77-407e-b0f4-4a32af3b9ed5.svg);
+    /*content: url(./assets/images/8cb015bf-0b77-407e-b0f4-4a32af3b9ed5.svg);*/
     position: absolute;
     bottom: -11px;
     left: -160px;
@@ -1999,3 +2000,46 @@
 .banner-md  .banner-item-content {
   left: 20px;
 }
+
+.search-header-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+  width: 100%;
+  flex: 1;
+  order: 2; /* lo coloca en el centro entre logo y menú */
+  margin: 10px 0;
+}
+
+.search-form {
+  display: flex;
+  max-width: 600px;
+  width: 100%;
+}
+
+.search-input-header {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid var(--AJsystem-input-color);
+  border-radius: 4px 0 0 4px;
+  font-size: 1.6rem;
+  background-color: white;
+  color: black;
+}
+
+.search-button-header {
+   background-color: var(--AJsystem-blue);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  font-family: var(--ff-museomoderno);
+  transition: background-color 0.3s;
+}
+
+.search-button-header:hover {
+  background-color: var(--AJsystem-glow);
+}
+