added searchform component

src/app/pages/search/searchform/searchform.html

@@ -0,0 +1,24 @@
+<div class="flex">
+<form class="inputSearch flex" (ngSubmit)="onSubmit()">
+  <label class="input">
+    <svg
+      class="h-[1em] opacity-50"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <g
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="2.5"
+        fill="none"
+        stroke="currentColor"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="m21 21-4.3-4.3"></path>
+      </g>
+    </svg>
+    <input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />   
+  </label>
+  <button class="btn mx-2">Search</button>
+</form>
+</div>

src/app/pages/search/searchform/searchform.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Searchform } from './searchform';
+
+describe('Searchform', () => {
+  let component: Searchform;
+  let fixture: ComponentFixture<Searchform>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Searchform]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Searchform);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/search/searchform/searchform.ts

@@ -0,0 +1,38 @@
+import { Component, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { NasaApi } from '../../../interfaces/nasa-api';
+import { NAPOD } from '../../../services/napod';
+
+@Component({
+  selector: 'app-searchform',
+  imports: [],
+  templateUrl: './searchform.html',
+  styleUrl: './searchform.css',
+})
+export class Searchform {
+    private readonly nasaApi = inject(NAPOD);
+  private readonly router = inject(Router)
+  searchResults = signal<NasaApi | null>(null)
+  searchString=signal('');
+
+  onSubmit() {
+    this.nasaApi.searchForVideos(this.searchString()).subscribe({
+      next: (data)=>{this.searchResults.set(data);
+        console.log(data.collection);
+      },
+      error: error =>{console.log(error);
+      }
+    })   
+  }
+
+  onClick(nasaId: string){
+    this.router.navigate(['/video/'+nasaId])
+  }
+
+  updateSearch(event: Event){
+    console.log(this.searchString());
+    const target = event.target as HTMLInputElement;
+    this.searchString.set(target.value)
+  }
+
+}