feat: placeholder component in hoppscotch-ui (#3123)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -56,20 +56,19 @@
                     }
                   "
                 />
-                <div
+                <HoppSmartPlaceholder
                   v-if="
                     !(
                       filteredCodegenDefinitions.length !== 0 ||
                       CodegenDefinitions.length === 0
                     )
                   "
-                  class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+                  :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                 >
-                  <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-                  <span class="my-2 text-center">
-                    {{ t("state.nothing_found") }} "{{ searchQuery }}"
-                  </span>
-                </div>
+                  <template #icon>
+                    <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+                  </template>
+                </HoppSmartPlaceholder>
               </div>
             </div>
           </template>