pull out tutorial

tutorial/Tutorial.jsx

@@ -0,0 +1,53 @@
+/*
+Tutorial.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/tutorial/Tutorial.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tutorial from './tutorial.mdx';
+import './style.css';
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <div className="min-h-screen">
+      <header className="flex-none flex justify-center w-full h-16 px-2 items-center border-b border-gray-200 bg-white">
+        <div className="p-4 w-full max-w-3xl flex justify-between">
+          <div className="flex items-center space-x-2">
+            <img src={'https://tidalcycles.org/img/logo.svg'} className="Tidal-logo w-10 h-10" alt="logo" />
+            <h1 className="text-xl">Strudel Tutorial</h1>
+          </div>
+          {!window.location.href.includes('localhost') && (
+            <div className="flex space-x-4">
+              <a href="../">go to REPL</a>
+            </div>
+          )}
+        </div>
+      </header>
+      <main className="p-4 max-w-3xl prose">
+        <Tutorial />
+      </main>
+    </div>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+
+/*
+// for pragmatic reasons, I just added the tailwind classes from MiniRepl here to make them work
+// TODO: find a way to "export" tailwind classes from package
+rounded-md overflow-hidden bg-[#444C57]
+flex justify-between bg-slate-700 border-t border-slate-500
+flex
+w-16 flex items-center justify-center p-1 bg-slate-700 border-r border-slate-500  text-white hover:bg-slate-600
+animate-pulse
+h-5 w-5
+w-16 flex items-center justify-center p-1 border-slate-500  hover:bg-slate-600
+bg-slate-700 border-r border-slate-500 text-white
+bg-slate-600 text-slate-400 cursor-not-allowed
+text-right p-1 text-sm
+text-red-200
+flex space-y-0 overflow-auto relative
+*/