move the search results into a `ContentItem` component

src/components/ContentItem.vue

@@ -0,0 +1,52 @@
+<template>
+    <VideoItem v-if="shouldUseVideoItem(contentItem)" :video="contentItem" height="94" width="168" />
+    <div v-else>
+        <router-link :to="contentItem.url">
+            <div class="relative">
+                <img class="w-full" :src="contentItem.thumbnail" loading="lazy" />
+            </div>
+            <p>
+                <span v-text="contentItem.name" />
+                <font-awesome-icon class="ml-1.5" v-if="contentItem.verified" icon="check" />
+            </p>
+        </router-link>
+        <p v-if="contentItem.description" v-text="contentItem.description" />
+        <router-link v-if="contentItem.uploaderUrl" class="link" :to="contentItem.uploaderUrl">
+            <p>
+                <span v-text="contentItem.uploader" />
+                <font-awesome-icon class="ml-1.5" v-if="contentItem.uploaderVerified" icon="check" />
+            </p>
+        </router-link>
+
+        <a v-if="contentItem.uploaderName" class="link" v-text="contentItem.uploaderName" />
+        <template v-if="contentItem.videos >= 0">
+            <br v-if="contentItem.uploaderName" />
+            <strong v-text="`${contentItem.videos} ${$t('video.videos')}`" />
+        </template>
+
+        <br />
+    </div>
+</template>
+
+<script>
+import VideoItem from "./VideoItem.vue";
+
+export default {
+    components: {
+        VideoItem,
+    },
+    props: {
+        contentItem: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    methods: {
+        shouldUseVideoItem(item) {
+            return item.title;
+        },
+    },
+};
+</script>

src/components/SearchResults.vue

@@ -20,43 +20,17 @@
 
     <div v-if="results" class="video-grid">
         <template v-for="result in results.items" :key="result.url">
-            <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
-            <div v-if="!shouldUseVideoItem(result)">
-                <router-link :to="result.url">
-                    <div class="relative">
-                        <img class="w-full" :src="result.thumbnail" loading="lazy" />
-                    </div>
-                    <p>
-                        <span v-text="result.name" />
-                        <font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
-                    </p>
-                </router-link>
-                <p v-if="result.description" v-text="result.description" />
-                <router-link v-if="result.uploaderUrl" class="link" :to="result.uploaderUrl">
-                    <p>
-                        <span v-text="result.uploader" />
-                        <font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
-                    </p>
-                </router-link>
-
-                <a v-if="result.uploaderName" class="link" v-text="result.uploaderName" />
-                <template v-if="result.videos >= 0">
-                    <br v-if="result.uploaderName" />
-                    <strong v-text="`${result.videos} ${$t('video.videos')}`" />
-                </template>
-
-                <br />
-            </div>
+            <ContentItem :content-item="result" />
         </template>
     </div>
 </template>
 
 <script>
-import VideoItem from "./VideoItem.vue";
+import ContentItem from "./ContentItem.vue";
 
 export default {
     components: {
-        VideoItem,
+        ContentItem,
     },
     data() {
         return {
@@ -124,9 +98,6 @@ export default {
                 });
             }
         },
-        shouldUseVideoItem(item) {
-            return item.title;
-        },
         handleRedirect() {
             const query = this.$route.query.search_query;
             const url =