simplify orchestra

darkroomengineering · Nov 23, 2023 · 3e25913 · 3e25913 · github-actions · Nov 23, 2023
1 parent 152bc98
commit 3e25913
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/libs/orchestra/index.js b/libs/orchestra/index.js
@@ -2,7 +2,6 @@ import { broadcast } from 'libs/zustand-broadcast'
 import { useEffect, useState } from 'react'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
-import s from './orchestra.module.scss'
 
 // avoid to display debug tools on orchestra page
 let isOrchestraPage = false
@@ -28,7 +27,10 @@ export function useOrchestra() {
   return isVisible && values
 }
 
-export function OrchestraToggle({ icon, title, id }) {
+// to be added to debug pages
+export function OrchestraToggle({ children, title, id }) {
+  isOrchestraPage = true
+
   return (
     <button
       onClick={() => {
@@ -39,15 +41,9 @@ export function OrchestraToggle({ icon, title, id }) {
         })
       }}
       title={title}
+      style={{ fontSize: '64px' }}
     >
-      {icon}
+      {children}
     </button>
   )
 }
-
-// to be added to debug pages
-export function OrchestraPage({ children }) {
-  isOrchestraPage = true
-
-  return <div className={s.orchestra}>{children}</div>
-}
diff --git a/libs/orchestra/orchestra.module.scss b/libs/orchestra/orchestra.module.scss
diff --git a/pages/_debug/orchestra/index.js b/pages/_debug/orchestra/index.js
@@ -1,14 +1,22 @@
-import { OrchestraPage, OrchestraToggle } from 'libs/orchestra'
+import { OrchestraToggle } from 'libs/orchestra'
 import { forwardRef } from 'react'
 
 const Orchestra = forwardRef(function Orchestra({}) {
   return (
-    <OrchestraPage>
-      <OrchestraToggle icon="⚙️" title="studio" id="studio" />
-      <OrchestraToggle icon="📈" title="performance" id="stats" />
-      <OrchestraToggle icon="🌐" title="grid" id="grid" />
-      <OrchestraToggle icon="🚧" title="dev" id="dev" />
-    </OrchestraPage>
+    <>
+      <OrchestraToggle title="studio" id="studio">
+        ⚙️
+      </OrchestraToggle>
+      <OrchestraToggle title="performance" id="stats">
+        📈
+      </OrchestraToggle>
+      <OrchestraToggle title="grid" id="grid">
+        🌐
+      </OrchestraToggle>
+      <OrchestraToggle title="dev" id="dev">
+        🚧
+      </OrchestraToggle>
+    </>
   )
 })