Moved search result item description badge into separate component

oliverschwendener · Feb 11, 2025 · 6b2fead · 6b2fead
1 parent f0367c7
commit 6b2fead
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/renderer/Core/Search/CompactSearchResultListItem.tsx b/src/renderer/Core/Search/CompactSearchResultListItem.tsx
@@ -1,15 +1,13 @@
 import type { SearchResultItem } from "@common/Core";
-import { Badge, Text } from "@fluentui/react-components";
-import { useTranslation } from "react-i18next";
+import { Text } from "@fluentui/react-components";
+import { SearchResultItemDescriptionBadge } from "./SearchResultItemDescriptionBadge";
 import { SearchResultItemImage } from "./SearchResultItemImage";
 
 type CompactSearchResultListItemProps = {
     searchResultItem: SearchResultItem;
 };
 
 export const CompactSearchResultListItem = ({ searchResultItem }: CompactSearchResultListItemProps) => {
-    const { t } = useTranslation();
-
     return (
         <div
             style={{
@@ -38,13 +36,7 @@ export const CompactSearchResultListItem = ({ searchResultItem }: CompactSearchR
                 {searchResultItem.name}
             </Text>
             <div style={{ flexShrink: 0, display: "flex" }}>
-                <Badge color="subtle" size="small">
-                    {searchResultItem.descriptionTranslation
-                        ? t(searchResultItem.descriptionTranslation.key, {
-                              ns: searchResultItem.descriptionTranslation.namespace,
-                          })
-                        : searchResultItem.description}
-                </Badge>
+                <SearchResultItemDescriptionBadge searchResultItem={searchResultItem} />
             </div>
         </div>
     );

diff --git a/src/renderer/Core/Search/DetailedSearchResultItem.tsx b/src/renderer/Core/Search/DetailedSearchResultItem.tsx
@@ -1,15 +1,13 @@
 import type { SearchResultItem } from "@common/Core";
-import { Badge, Text } from "@fluentui/react-components";
-import { useTranslation } from "react-i18next";
+import { Text } from "@fluentui/react-components";
+import { SearchResultItemDescriptionBadge } from "./SearchResultItemDescriptionBadge";
 import { SearchResultItemImage } from "./SearchResultItemImage";
 
 type DetailedSearchResultListItemProps = {
     searchResultItem: SearchResultItem;
 };
 
 export const DetailedSearchResultListItem = ({ searchResultItem }: DetailedSearchResultListItemProps) => {
-    const { t } = useTranslation();
-
     return (
         <div
             style={{
@@ -59,13 +57,7 @@ export const DetailedSearchResultListItem = ({ searchResultItem }: DetailedSearc
                 )}
             </div>
             <div style={{ flexShrink: 0, display: "flex" }}>
-                <Badge color="subtle" size="small">
-                    {searchResultItem.descriptionTranslation
-                        ? t(searchResultItem.descriptionTranslation.key, {
-                              ns: searchResultItem.descriptionTranslation.namespace,
-                          })
-                        : searchResultItem.description}
-                </Badge>
+                <SearchResultItemDescriptionBadge searchResultItem={searchResultItem} />
             </div>
         </div>
     );

diff --git a/src/renderer/Core/Search/SearchResultItemDescriptionBadge.tsx b/src/renderer/Core/Search/SearchResultItemDescriptionBadge.tsx
@@ -0,0 +1,17 @@
+import type { SearchResultItem } from "@common/Core";
+import { Badge } from "@fluentui/react-components";
+import { useTranslation } from "react-i18next";
+
+export const SearchResultItemDescriptionBadge = ({ searchResultItem }: { searchResultItem: SearchResultItem }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Badge color="subtle" size="small">
+            {searchResultItem.descriptionTranslation
+                ? t(searchResultItem.descriptionTranslation.key, {
+                      ns: searchResultItem.descriptionTranslation.namespace,
+                  })
+                : searchResultItem.description}
+        </Badge>
+    );
+};