Add SearchResultItem component

fe/src/App.css

@@ -105,3 +105,28 @@ h1:hover {
     font-size: 17px;
   }
 }
+
+.search-result-item {
+  display: flex;
+  margin-bottom: 10px;
+
+  img {
+    max-height: 62px;
+  }
+
+  section {
+    flex: 1;
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;text-align: left;
+  }
+}
+
+.search-result-item-meta {
+  display: flex;
+}
+
+.search-result-item-year {
+  flex-basis: 45px;
+}

fe/src/components/search/SearchResult.tsx

@@ -1,3 +1,5 @@
+import SearchResultItem from "./SearchResultItem";
+
 interface SearchResultProps {
   items: object[],
 }
@@ -6,17 +8,16 @@ const SearchResult = ({ items }: SearchResultProps) => (
   <div className="search-result-wrapper">
     {items.length > 0 && items.map((item) => {
       const { Title, Poster, imdbID, Year, Type } = item;
+      const yearSanitized = Year.length > 4 ? `${Year.substring(0, 4)}..` : Year;
       return (
-        <div
-          // title={Title}
-          // image={Poster}
-          // imdbId={imdbID}
-          // key={Poster}
-          // year={Year}
-          // type={Type}
-        >
-          {Title} - {imdbID}
-        </div>
+        <SearchResultItem
+          title={Title}
+          image={Poster}
+          imdbId={imdbID}
+          key={Poster}
+          year={yearSanitized}
+          type={Type}
+        />
       );
     })}
   </div>

fe/src/components/search/SearchResultItem.tsx

@@ -0,0 +1,46 @@
+interface SearchResultItemProps {
+  title: string,
+  image: string,
+  imdbId: string,
+  year: string,
+  type: string,
+  clickHandler?: Function,
+}
+
+const SearchResultItem = ({
+  title,
+  image,
+  imdbId,
+  year,
+  type,
+  clickHandler,
+}: SearchResultItemProps) => (
+  <div
+    className="search-result-item"
+    onClick={() => clickHandler({
+      title,
+      imdbId,
+      year,
+    })}
+  >
+    <img src={image} alt={title} />
+    <section>
+      <div className="search-result-item-meta">
+        <span className="search-result-item-year">
+          {year}
+        </span>
+        &nbsp;
+        -
+        &nbsp;
+        <span className="search-result-item-title">
+          {title}
+        </span>
+      </div>
+      <div className="search-result-item-interaction">
+        ✅
+      </div>
+    </section>
+  </div>
+);
+
+export default SearchResultItem;