chore: improve placeholder component styles

packages/hoppscotch-ui/src/components/smart/Placeholder.vue

@@ -4,24 +4,31 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center mb-4"
+      class="inline-flex flex-col object-contain object-center"
       :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />
-    <slot name="icon"></slot>
-    <span v-if="heading" class="mb-2 font-semibold text-center">
+    <div v-if="hasIcon">
+      <slot name="icon"></slot>
+    </div>
+    <span v-if="heading" class="font-semibold mt-2 text-center">
       {{ heading }}
     </span>
     <span
-      class="max-w-sm mb-4 text-center whitespace-normal text-secondaryLight"
+      v-if="text"
+      class="max-w-sm mt-2 text-center whitespace-normal text-secondaryLight text-tiny"
     >
       {{ text }}
     </span>
-    <slot></slot>
+    <div v-if="hasBody" class="mt-4">
+      <slot name="body"></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
+
 withDefaults(
   defineProps<{
     src?: string
@@ -35,4 +42,14 @@ withDefaults(
     text: "",
   }
 )
+
+const slots = useSlots()
+
+const hasIcon = computed(() => {
+  return !!slots.icon
+})
+
+const hasBody = computed(() => {
+  return !!slots.body
+})
 </script>