Add useful components for ui

src/components/ui/Headline.astro

@@ -0,0 +1,48 @@
+---
+import type { Headline } from "~/types";
+import { twMerge } from "tailwind-merge";
+
+const {
+  title = await Astro.slots.render("title"),
+  subtitle = await Astro.slots.render("subtitle"),
+  tagline,
+  classes = {},
+} = Astro.props as Headline;
+
+const {
+  container: containerClass = "max-w-3xl",
+  title: titleClass = "text-3xl md:text-4xl ",
+  subtitle: subtitleClass = "text-xl",
+} = classes;
+---
+
+{
+  (title || subtitle || tagline) && (
+    <div
+      class={twMerge("mb-8 md:mx-auto md:mb-12 text-center", containerClass)}
+    >
+      {tagline && (
+        <p
+          class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
+          set:html={tagline}
+        />
+      )}
+      {title && (
+        <h2
+          class={twMerge(
+            "font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl",
+            titleClass
+          )}
+          set:html={title}
+        />
+      )}
+
+      {subtitle && (
+        <p
+          class={twMerge("mt-4 text-muted", subtitleClass)}
+          set:html={subtitle}
+        />
+      )}
+    </div>
+  )
+}