From 644139b42c4271c57c6a1a63b3c405dd514e83a3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-P9VU163\\admin" <rumyancevkv@mail.ru>
Date: Wed, 25 Jun 2025 10:32:40 +0300
Subject: [PATCH] add Create HeroSearchComponent

---
 src/app/hero-search/hero-search.component.css | 47 +++++++++++++++++++
 .../hero-search/hero-search.component.html    | 12 +++++
 src/app/hero-search/hero-search.component.ts  | 11 +++++
 3 files changed, 70 insertions(+)
 create mode 100644 src/app/hero-search/hero-search.component.css
 create mode 100644 src/app/hero-search/hero-search.component.html
 create mode 100644 src/app/hero-search/hero-search.component.ts

diff --git a/src/app/hero-search/hero-search.component.css b/src/app/hero-search/hero-search.component.css
new file mode 100644
index 0000000..9515054
--- /dev/null
+++ b/src/app/hero-search/hero-search.component.css
@@ -0,0 +1,47 @@
+/* HeroSearch private styles */
+
+label {
+  display: block;
+  font-weight: bold;
+  font-size: 1.2rem;
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+
+}
+input {
+  padding: .5rem;
+  width: 100%;
+  max-width: 600px;
+  box-sizing: border-box;
+  display: block;
+}
+
+input:focus {
+  outline: #336699 auto 1px;
+}
+
+li {
+  list-style-type: none;
+}
+.search-result li a {
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  display: inline-block;
+  width: 100%;
+  max-width: 600px;
+  padding: .5rem;
+  box-sizing: border-box;
+  text-decoration: none;
+  color: black;
+}
+
+.search-result li a:hover {
+  background-color: #435A60;
+  color: white;
+}
+
+ul.search-result {
+  margin-top: 0;
+  padding-left: 0;
+}
\ No newline at end of file
diff --git a/src/app/hero-search/hero-search.component.html b/src/app/hero-search/hero-search.component.html
new file mode 100644
index 0000000..021cac2
--- /dev/null
+++ b/src/app/hero-search/hero-search.component.html
@@ -0,0 +1,12 @@
+<div id="search-component">
+  <label for="search-box">Hero Search</label>
+  <input #searchBox id="search-box" (input)="search(searchBox.value)" />
+
+  <ul class="search-result">
+    <li *ngFor="let hero of heroes$ | async" >
+      <a routerLink="/detail/{{hero.id}}">
+        {{hero.name}}
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/src/app/hero-search/hero-search.component.ts b/src/app/hero-search/hero-search.component.ts
new file mode 100644
index 0000000..e9e104c
--- /dev/null
+++ b/src/app/hero-search/hero-search.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-search',
+  imports: [],
+  templateUrl: './hero-search.component.html',
+  styleUrl: './hero-search.component.css'
+})
+export class HeroSearch {
+
+}