-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplayground.html
92 lines (82 loc) · 3.09 KB
/
playground.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>SSReact Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/loader.js"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="text-center mb-8">
<h1 class="text-4xl font-bold mb-2">SSReact Playground</h1>
<p class="text-gray-600">Edit the code on the left, see the result on the right!</p>
</header>
<div class="grid grid-cols-2 gap-6 h-[calc(100vh-200px)]">
<!-- Code Editor Panel -->
<div class="bg-gray-900 rounded-lg p-4 relative">
<div id="monacoEditor" class="w-full h-full"></div>
<button onclick="updatePreview()"
class="absolute bottom-6 right-6 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
Run
</button>
</div>
<!-- Preview Panel -->
<div class="bg-white rounded-lg shadow-lg">
<div class="border-b px-4 py-2 bg-gray-50 rounded-t-lg">
<h3 class="text-gray-600 font-semibold">Preview</h3>
</div>
<iframe id="preview" class="w-full h-full rounded-b-lg"></iframe>
</div>
</div>
</div>
<script>
// Initial code template
const initialCode = `<!DOCTYPE html>
<html>
<head>
<title>SSReact Example</title>
<script src="https://cdn.tailwindcss.com"><\/script>
<script src="https://ssreact.com/min.js"><\/script>
</head>
<body class="p-8">
<div id="ssreact.Greeting"></div>
<script type="text/babel">
function Greeting({ name = "World" }) {
const [count, setCount] = React.useState(0);
return (
<div
onClick={() => setCount(count + 1)}
class="bg-blue-100 p-4 rounded-lg cursor-pointer hover:bg-blue-200 transition-colors"
>
Hello {name} ! Clicks: {count}
</div>
);
}
<\/script>
</body>
</html>`;
// Set up Monaco editor
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs' } });
require(['vs/editor/editor.main'], function () {
window.editor = monaco.editor.create(document.getElementById('monacoEditor'), {
value: initialCode,
language: 'html',
theme: 'vs-dark',
minimap: {
enabled: false
},
scrollBeyondLastLine: false,
automaticLayout: true
});
// Run initial preview
updatePreview();
});
// Function to update the preview
function updatePreview() {
const preview = document.getElementById('preview');
const code = window.editor.getValue();
preview.srcdoc = code;
}
</script>
</body>
</html>