4 files changed, 132 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html
new file mode 100644
index 0000000..8854d5d
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html
@@ -0,0 +1,30 @@
+<form [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="form">
+  <fieldset class="form__fieldset">
+    <legend class="form__legend">Search a new recipe</legend>
+    <div class="form__item">
+      <label for="search-by" class="form__label">By</label>
+      <select
+        id="search-by"
+        name="search-by"
+        class="form__select"
+        formControlName="by"
+      >
+        <option value="name" selected>Name</option>
+        <option value="ingredient">Ingredient</option>
+        <option value="category">Category</option>
+      </select>
+    </div>
+    <div class="form__item">
+      <label for="search-query" class="form__label">Query</label>
+      <input
+        type="search"
+        name="search-query"
+        id="search-query"
+        formControlName="query"
+        class="form__input"
+        placeholder="Keywords..."
+      />
+    </div>
+    <button class="btn" type="submit">Search</button>
+  </fieldset>
+</form>
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss
new file mode 100644
index 0000000..0b66d92
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.scss
@@ -0,0 +1,49 @@
+.form {
+  background: #fff;
+  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  box-shadow: 0 0 5px -3px #000000a5;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+
+  &__fieldset {
+    border: none;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+
+  &__legend {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+    padding: 0;
+  }
+
+  &__item {
+    display: flex;
+    flex-flow: column wrap;
+  }
+
+  &__label {
+    color: hsl(0, 0%, 25%);
+    font-size: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    cursor: pointer;
+    margin-bottom: 0.2rem;
+  }
+
+  &__input,
+  &__select {
+    background: #fff;
+    border: 2px solid #195881;
+    padding: 0.5rem;
+  }
+
+  &__select {
+    cursor: pointer;
+  }
+}
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts
new file mode 100644
index 0000000..5e23163
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SearchComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts
new file mode 100644
index 0000000..594a505
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+import { SearchService } from 'src/app/shared/services/search.service';
+
+@Component({
+  selector: '.search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss'],
+})
+export class SearchComponent {
+  searchForm = this.formBuilder.group({
+    by: 'name',
+    query: '',
+  });
+
+  constructor(
+    private search: SearchService,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {}
+
+  onSubmit(): void {
+    const by = this.searchForm.get('by')?.value;
+    const query = this.searchForm.get('query')?.value;
+    this.search.findResults(query, by);
+    this.router.navigate([`/search`, { by, query }]);
+  }
+}