project setup

src/projects/shared/Demo.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type DemoProps = {
+	image: string;
+	title: string;
+	type?: "boxed" | "plain";
+	children?: ReactNode;
+};
+
+export function Demo({ image, title, type = "plain", children }: DemoProps) {
+	return (
+		<figure
+			className={cn(
+				"w-full",
+				type === "boxed" &&
+					"border border-ayu-gutter rounded bg-ayu-highlight p-2",
+			)}
+		>
+			<img
+				src={image}
+				alt={title}
+				className={cn("w-full", type === "boxed" ? "rounded" : "rounded-md")}
+			/>
+			<figcaption className="mt-2 text-sm text-ayu-gutter text-pretty">
+				{title}
+				{children}
+			</figcaption>
+		</figure>
+	);
+}