wip

playground/src/lib/components/Playground.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import EditorPanel from './EditorPanel.svelte';
+
+	// Sample data based on the provided example
+	let templateValue = $state(`---
+_type: Recipe
+author.name: Max Richter
+---
+
+# Baguette
+
+My favourite baguette recipe
+
+## Ingredients
+- Flour
+- Water
+- Salt
+
+## Steps
+1. Mix Flour Water and Salt
+2. Bake the bread`);
+
+	let markdownValue = $state(`---
+_type: Recipe
+author.name: Max Richter
+---
+
+# Baguette
+
+My favourite baguette recipe
+
+## Ingredients
+- Flour
+- Water
+- Salt
+
+## Steps
+1. Mix Flour Water and Salt
+2. Bake the bread`);
+
+	// Simulated JSON output - in real implementation this would be generated from the parser
+	let jsonOutput = $derived(() => {
+		try {
+			const output = {
+				_type: 'Recipe',
+				name: 'Baguette',
+				author: {
+					_type: 'Person',
+					name: 'Max Richter'
+				},
+				description: 'My favourite baguette recipe',
+				recipeIngredient: ['Flour', 'Water', 'Salt'],
+				recipeInstructions: ['Mix Flour Water and Salt', 'Bake the bread']
+			};
+			return JSON.stringify(output, null, 2);
+		} catch (e) {
+			return 'Invalid input';
+		}
+	});
+</script>
+
+<div class="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-3">
+	<EditorPanel
+		title="Template"
+		bind:value={templateValue}
+		placeholder="Enter your Marka template here..."
+	/>
+
+	<EditorPanel
+		title="Markdown"
+		bind:value={markdownValue}
+		placeholder="Enter your markdown content here..."
+	/>
+
+	<EditorPanel title="Data" value={jsonOutput()} readonly={true}>
+		{#snippet children()}
+			<div class="absolute bottom-4 right-4 opacity-60">
+				<div class="rounded border bg-white px-2 py-1 text-xs text-gray-500">
+					Auto-generated JSON
+				</div>
+			</div>
+		{/snippet}
+	</EditorPanel>
+</div>