demo box component

src/components/Demo.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+    image: string;
+    title: string;
+    type?: "boxed" | "simple";
+}
+
+const { image, title, type = "simple" } = Astro.props;
+---
+
+{type === "boxed" ? (
+    <div class="border demo-border">
+        <span>{title}</span>
+        <img
+            src={image}
+            alt={title}
+            class="object-cover"
+        />
+    </div>
+) : (
+    <img
+        src={image}
+        alt={title}
+        class="w-full h-full object-cover demo-border"
+    />
+)}