feat(library ui): add header

pages/admin/library/index.vue

@@ -1,7 +1,22 @@
 <template>
+  <div class="space-y-4">
+    <div class="mx-auto max-w-2xl lg:mx-0">
+      <h2
+        class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+      >
+        Library
+      </h2>
+      <p
+        class="mt-2 text-pretty text-sm font-medium text-gray-500 sm:text-md/8"
+      >
+        As you add folders to your library, Drop will detect it and prompt you
+        to import it. Each game needs to be imported before you can import a
+        version.
+      </p>
+    </div>
     <div
       v-if="libraryState.unimportedGames.length > 0"
-    class="rounded-md bg-blue-600/10 p-4 mb-4"
+      class="rounded-md bg-blue-600/10 p-4"
     >
       <div class="flex">
         <div class="flex-shrink-0">
@@ -51,7 +66,9 @@
             </h3>
             <dl class="mt-1 flex flex-col justify-between">
               <dt class="sr-only">Short Description</dt>
-            <dd class="text-sm text-zinc-400">{{ game.mShortDescription }}</dd>
+              <dd class="text-sm text-zinc-400">
+                {{ game.mShortDescription }}
+              </dd>
               <dt class="sr-only">Metadata provider</dt>
             </dl>
             <NuxtLink
@@ -111,6 +128,7 @@
         </div>
       </li>
     </ul>
+  </div>
 </template>
 
 <script setup lang="ts">