Create separate component for item status

fe/src/components/item/ItemStatusInLibrary.tsx

@@ -0,0 +1,19 @@
+const statusIcons = {
+  available: "✅",
+  requested: "⏳",
+  missing: " ",
+}
+
+interface ItemStatusInLibraryProps {
+  imdbId: string,
+};
+
+const ItemStatusInLibrary = ({}: ItemStatusInLibraryProps) => {
+  return (
+    <div>
+      {Object.values(statusIcons)[Math.floor(Math.random() * Object.values(statusIcons).length)]}
+    </div>
+  );
+}
+
+export default ItemStatusInLibrary

fe/src/components/search/SearchResultItem.tsx

@@ -1,3 +1,5 @@
+import ItemStatusInLibrary from "../item/ItemStatusInLibrary";
+
 interface SearchResultItemProps {
   title: string,
   image: string,
@@ -12,12 +14,6 @@ const itemTypeIcons = {
   series: "📺",
 }
 
-const itemStatusInLibrary = {
-  available: "✅",
-  requested: "⏳",
-  missing: " ",
-}
-
 // todo add link to movie if available
 const SearchResultItem = ({
   title,
@@ -41,9 +37,7 @@ const SearchResultItem = ({
         <div>
           {itemTypeIcons[type]}
         </div>
-        <div>
-          {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
-        </div>
+        <ItemStatusInLibrary imdbId={imdbId} />
       </div>
       <div className="search-result-item-year">
         {year.substring(0, 4)}