feat: search bar

src/app/components/contact-search-bar/contact-search-bar.html

@@ -0,0 +1,5 @@
+<input 
+    (input)="contactSearch.emit($event.target.value)" 
+    class="search-bar shadow"
+    placeholder="{{strings.searchContactPlaceholder}}" 
+    type="text">

src/app/components/contact-search-bar/contact-search-bar.scss

@@ -0,0 +1,14 @@
+.search-bar {
+    width: 100%;
+    height: 4rem;
+    padding: 1rem;
+    border: 1px solid #e1e1e1;
+    margin: 2rem 0;
+}
+
+.shadow {
+    -webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.7);
+    -moz-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.7);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+}

src/app/components/contact-search-bar/contact-search-bar.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactSearchBar } from './contact-search-bar';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { strings } from '../../strings';
+
+describe('ContactSearchBar', () => {
+  let component: ContactSearchBar;
+  let fixture: ComponentFixture<ContactSearchBar>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactSearchBar],
+      providers: [{provide: STRINGS_INJECTOR, useValue: strings}]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactSearchBar);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/contact-search-bar/contact-search-bar.ts

@@ -0,0 +1,13 @@
+import { Component, inject, output } from '@angular/core';
+import { STRINGS_INJECTOR } from '../../app.config';
+
+@Component({
+  selector: 'app-contact-search-bar',
+  imports: [],
+  templateUrl: './contact-search-bar.html',
+  styleUrl: './contact-search-bar.scss',
+})
+export class ContactSearchBar {
+  contactSearch = output<string>()
+  protected readonly strings = inject(STRINGS_INJECTOR);
+}