Show Other Available Titles if nothing else shown

Signed-off-by: Glenn Lewis <[email protected]>

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="paragraphs">
     <p>Are you searching for the perfect personalized gift for someone who enjoys puzzles?</p>
-    <p><b>You found it!</b></p>
+    <p><strong>You found it!</strong></p>
     <p>What better way to surprise your friends, coworkers, or loved ones? Show them that you care by sending them their
       own personalized puzzle books today!</p>
     <p>Search for a name to see what books are available:</p>
@@ -10,9 +10,7 @@
 </template>
 
 <script setup>
-import { otherBooks } from './components/books-by-name.js'
 import SearchBooks from './components/SearchBooks.vue'
-import DisplayBook from './components/DisplayBook.vue'
 </script>
 
 <style lang="scss" scoped>
@@ -31,6 +29,11 @@ h2 {
   padding-bottom: 2rem;
 }
 
+strong {
+  font-weight: 900;
+  font-size: larger;
+}
+
 .top-space {
   padding-top: 4rem;
 }

src/components/SearchBooks.vue

@@ -4,18 +4,27 @@
     <span></span>
   </span>
   <div v-if="!!similarMatches" class="shortcut">{{ similarMatches }}</div>
-  <div class="books">
+  <div class="books" v-if="!!books.length">
     <div v-for="book in books" class="book">
       <DisplayBook :book="book" />
     </div>
   </div>
+  <div v-if="!books.length">
+    <h1 class="top-space">Other Available Titles</h1>
+    <div class="books">
+      <div v-for="book in otherBooks" class="book">
+        <DisplayBook :book="book" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 // <div v-if="!!shortcut" class="shortcut">Shortcut: <a :href="shortcut">{{ shortcut }}</a></div>
 
 import { onMounted, ref, watch } from 'vue'
 import DisplayBook from './DisplayBook.vue'
+import { otherBooks } from './books-by-name.js'
 
 // const searchUrl = 'http://localhost:3000/search'
 const searchUrl = 'https://on-demand-books-com-kzfxdscz.fermyon.app/search'