hide patterns tab for now

+ add examples to welcome tab
tidalcycles · Oct 29, 2023 · b245d44 · b245d44
1 parent b15f7bc
commit b245d44
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
@@ -86,7 +86,7 @@ export function Panel({ context }) {
           <PanelTab name="intro" label="welcome" />
           <PanelTab name="sounds" />
           <PanelTab name="console" />
-          <PanelTab name="patterns" />
+          {/* <PanelTab name="patterns" /> */}
           <PanelTab name="reference" />
           <PanelTab name="settings" />
           {TAURI && <PanelTab name="files" />}
@@ -100,8 +100,8 @@ export function Panel({ context }) {
       {activeFooter !== '' && (
         <div className="relative overflow-hidden">
           <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
-            {activeFooter === 'intro' && <WelcomeTab />}
-            {activeFooter === 'patterns' && <PatternsTab context={context} />}
+            {activeFooter === 'intro' && <WelcomeTab context={context} />}
+            {/* {activeFooter === 'patterns' && <PatternsTab context={context} />} */}
             {activeFooter === 'console' && <ConsoleTab log={log} />}
             {activeFooter === 'sounds' && <SoundsTab />}
             {activeFooter === 'reference' && <Reference />}

diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
@@ -1,7 +1,8 @@
 import { cx } from '@strudel.cycles/react';
 import React from 'react';
+import * as tunes from '../tunes.mjs';
 
-export function WelcomeTab() {
+export function WelcomeTab({ context }) {
   return (
     <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
       <h3>
@@ -44,6 +45,19 @@ export function WelcomeTab() {
         </a>{' '}
         to ensure ongoing development 💖
       </p>
+      <h2 className="text-xl mb-2">examples</h2>
+      {Object.entries(tunes).map(([key, tune]) => (
+        <a
+          key={key}
+          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          onClick={() => {
+            console.log('clikkk', tune);
+            context.handleUpdate(tune);
+          }}
+        >
+          {key}
+        </a>
+      ))}
     </div>
   );
 }