feat: course generation

components/BubbleTitle.vue

@@ -16,15 +16,21 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="relative font-sans select-none">
-    <h1
-      v-if="subtitle"
-      class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
-    >{{ subtitle }}</h1>
+  <div class="relative font-sans select-none flex justify-between items-center">
+    <div>
+      <h1
+        v-if="subtitle"
+        class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
+      >{{ subtitle }}</h1>
 
-    <h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
-      {{ title }}
-    </h1>
+      <h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
+        {{ title }}
+      </h1>
+    </div>
+
+    <div class="flex gap-2">
+      <slot name="action"/>
+    </div>
 
     <div
       v-if="bubble"