Simplify component structure

seek-oss · May 10, 2024 · ed29c47 · ed29c47
1 parent 1b31838
commit ed29c47
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 42 deletions.
diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts
@@ -90,7 +90,6 @@ export const buttons = style([
 export const panel = style([
   sprinkles({
     position: 'relative',
-    display: 'flex',
     overflow: 'auto',
     pointerEvents: 'auto',
   }),
@@ -101,11 +100,6 @@ export const panel = style([
   },
 ]);
 
-export const preference = sprinkles({
-  position: 'absolute',
-  inset: 0,
-});
-
 export const transitionStyles = {
   enter: style({
     opacity: 0,

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
@@ -169,45 +169,40 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
           onExited={() => setLastActivePanel(undefined)}
         >
           <div className={styles.panel} id="custom-id">
-            <div className={styles.preference}>
-              {lastActivePanel === 'snippets' && (
-                <Snippets
-                  snippets={snippets}
-                  onHighlight={(snippet) => {
+            {lastActivePanel === 'snippets' && (
+              <Snippets
+                snippets={snippets}
+                onHighlight={(snippet) => {
+                  dispatch({
+                    type: 'previewSnippet',
+                    payload: { snippet },
+                  });
+                }}
+                onClose={(snippet) => {
+                  if (snippet) {
                     dispatch({
-                      type: 'previewSnippet',
+                      type: 'persistSnippet',
                       payload: { snippet },
                     });
-                  }}
-                  onClose={(snippet) => {
-                    if (snippet) {
-                      dispatch({
-                        type: 'persistSnippet',
-                        payload: { snippet },
-                      });
-                    } else {
-                      dispatch({ type: 'closeToolbar' });
-                    }
-                  }}
-                />
-              )}
-
-              {lastActivePanel === 'frames' && (
-                <FramesPanel
-                  availableWidths={allWidths}
-                  availableThemes={allThemes}
-                />
-              )}
-
-              {lastActivePanel === 'preview' && (
-                <PreviewPanel
-                  themes={allThemes}
-                  visibleThemes={visibleThemes}
-                />
-              )}
-
-              {lastActivePanel === 'settings' && <SettingsPanel />}
-            </div>
+                  } else {
+                    dispatch({ type: 'closeToolbar' });
+                  }
+                }}
+              />
+            )}
+
+            {lastActivePanel === 'frames' && (
+              <FramesPanel
+                availableWidths={allWidths}
+                availableThemes={allThemes}
+              />
+            )}
+
+            {lastActivePanel === 'preview' && (
+              <PreviewPanel themes={allThemes} visibleThemes={visibleThemes} />
+            )}
+
+            {lastActivePanel === 'settings' && <SettingsPanel />}
           </div>
         </CSSTransition>
       </div>