Add useful components for ui

src/components/ui/WidgetWrapper.astro

@@ -0,0 +1,24 @@
+---
+import { twMerge } from "tailwind-merge";
+import Background from "./Background.astro";
+
+const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
+
+const WrapperTag = as;
+---
+
+<WrapperTag class="relative not-prose" {...id ? { id } : {}}>
+  <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
+    <slot name="bg">
+      {bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} />}
+    </slot>
+  </div>
+  <div
+    class:list={[
+      twMerge("relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default", containerClass),
+      { dark: isDark },
+    ]}
+  >
+    <slot />
+  </div>
+</WrapperTag>