encapsulate footer components

website/src/repl/Footer.jsx

@@ -76,7 +76,7 @@ export function Footer({ context }) {
           <FooterTab name="samples" />
           <FooterTab name="console" />
           <FooterTab name="reference" />
-          <FooterTab name="theme" />
+          <FooterTab name="settings" />
         </div>
         {activeFooter !== '' && (
           <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
@@ -89,19 +89,55 @@ export function Footer({ context }) {
           className="text-white font-mono text-sm h-[360px] flex-none overflow-auto max-w-full relative"
           ref={footerContent}
         >
-          {activeFooter === 'intro' && (
+          {activeFooter === 'intro' && <WelcomeTab />}
+          {activeFooter === 'console' && <ConsoleTab log={log} />}
+          {activeFooter === 'samples' && <SamplesTab />}
+          {activeFooter === 'reference' && <Reference />}
+          {activeFooter === 'settings' && <SettingsTab theme={theme} setTheme={setTheme} />}
+        </div>
+      )}
+    </footer>
+  );
+}
+
+function useLogger(onTrigger) {
+  useEvent(logger.key, onTrigger);
+}
+
+function linkify(inputText) {
+  var replacedText, replacePattern1, replacePattern2, replacePattern3;
+
+  //URLs starting with http://, https://, or ftp://
+  replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+  replacedText = inputText.replace(replacePattern1, '<a class="underline" href="$1" target="_blank">$1</a>');
+
+  //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+  replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+  replacedText = replacedText.replace(
+    replacePattern2,
+    '$1<a class="underline" href="http://$2" target="_blank">$2</a>',
+  );
+
+  //Change email addresses to mailto:: links.
+  replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+  replacedText = replacedText.replace(replacePattern3, '<a class="underline" href="mailto:$1">$1</a>');
+
+  return replacedText;
+}
+
+function WelcomeTab() {
+  return (
     <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
       <h3>
         <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
       </h3>
       <p>
-                You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic
+        You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic music
-                music pieces in the browser! It is free and open-source and made for beginners and experts alike. To get
+        pieces in the browser! It is free and open-source and made for beginners and experts alike. To get started:
-                started:
         <br />
         <br />
-                <span className="underline">1. hit play</span> - <span className="underline">2. change something</span>{' '}
+        <span className="underline">1. hit play</span> - <span className="underline">2. change something</span> -{' '}
-                - <span className="underline">3. hit update</span>
+        <span className="underline">3. hit update</span>
         <br />
         If you don't like what you hear, try <span className="underline">shuffle</span>!
       </p>
@@ -133,8 +169,11 @@ export function Footer({ context }) {
         to ensure ongoing development 💖
       </p>
     </div>
-          )}
+  );
-          {activeFooter === 'console' && (
+}
+
+function ConsoleTab({ log }) {
+  return (
     <div className="break-all px-4 dark:text-white text-stone-900">
       {log.map((l, i) => {
         const message = linkify(l.message);
@@ -149,26 +188,29 @@ export function Footer({ context }) {
         );
       })}
     </div>
-          )}
+  );
-          {activeFooter === 'samples' && (
+}
+
+function SamplesTab() {
+  return (
     <div className="break-normal w-full px-4 dark:text-white text-stone-900">
       <span>{loadedSamples.length} banks loaded:</span>
       {loadedSamples.map(([name, samples]) => (
         <span key={name} className="cursor-pointer hover:text-tertiary" onClick={() => {}}>
           {' '}
           {name}(
-                  {Array.isArray(samples)
+          {Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1}){' '}
-                    ? samples.length
-                    : typeof samples === 'object'
-                    ? Object.values(samples).length
-                    : 1}
-                  ){' '}
         </span>
       ))}
     </div>
-          )}
+  );
-          {activeFooter === 'reference' && <Reference />}
+}
-          {activeFooter === 'theme' && (
+function SettingsTab({ theme, setTheme }) {
+  /*<input type="checkbox" value={vimMode} onChange={(checked)=>{
+              console.log('vim mode toggle', checked)
+              }}/>*/
+
+  return (
     <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 p-2">
       {Object.entries(themes).map(([k, t]) => (
         <div
@@ -195,34 +237,5 @@ export function Footer({ context }) {
         </div>
       ))}
     </div>
-          )}
-        </div>
-      )}
-    </footer>
   );
 }
-
-function useLogger(onTrigger) {
-  useEvent(logger.key, onTrigger);
-}
-
-function linkify(inputText) {
-  var replacedText, replacePattern1, replacePattern2, replacePattern3;
-
-  //URLs starting with http://, https://, or ftp://
-  replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
-  replacedText = inputText.replace(replacePattern1, '<a class="underline" href="$1" target="_blank">$1</a>');
-
-  //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
-  replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
-  replacedText = replacedText.replace(
-    replacePattern2,
-    '$1<a class="underline" href="http://$2" target="_blank">$2</a>',
-  );
-
-  //Change email addresses to mailto:: links.
-  replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
-  replacedText = replacedText.replace(replacePattern3, '<a class="underline" href="mailto:$1">$1</a>');
-
-  return replacedText;
-}