fix(playground): use state to store the orientation value

Signed-off-by: chankruze <[email protected]>
brisa-build · Oct 10, 2024 · b99c390 · b99c390
1 parent eb2a91c
commit b99c390
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 10 deletions.
diff --git a/packages/www/src/global.d.ts b/packages/www/src/global.d.ts
diff --git a/packages/www/src/web-components/play-ground.tsx b/packages/www/src/web-components/play-ground.tsx
@@ -8,6 +8,11 @@ export default async function PlayGround(
  const code = state<string>('');
  const preview: HTMLIFrameElement = self.querySelector('#preview-iframe')!;
  const activeTab = state<string>('tab-wc');
+ const isMobileLayout = state<boolean>(false);
+
+ function updateSplitViewOrientation() {
+ isMobileLayout.value = window.innerWidth <= 968;
+ }
 
  function onReceiveCompiledCode(e: MessageEvent) {
  if (e.data.source !== 'brisa-playground-preview') return;
@@ -22,11 +27,16 @@ export default async function PlayGround(
  }
 
  onMount(() => {
+ // Set initial layout based on screen size
+ updateSplitViewOrientation();
+
  window.addEventListener('message', onReceiveCompiledCode);
+ window.addEventListener('resize', updateSplitViewOrientation);
  });
 
  cleanup(() => {
  window.removeEventListener('message', onReceiveCompiledCode);
+ window.removeEventListener('resize', updateSplitViewOrientation);
  });
 
  css`
@@ -99,20 +109,75 @@ export default async function PlayGround(
 
  .original-code {
  width: 100%;
- height: 100%;
  }
 
  .output {
  width: 100%;
+ height: 100%;
  }
  }
  `;
 
+ if (isMobileLayout.value) {
+ return (
+ <sp-split-view
+ vertical
+ class="playground"
+ resizable
+ label="Resize the code sections vertically"
+ >
+ <div class="original-code">
+ <slot name="code-editor" />
+ </div>
+ <div class="output">
+ <div role="tablist" class="tab-list">
+ <button
+ id="tab-wc"
+ type="button"
+ role="tab"
+ title="Web Component"
+ aria-label="Web Component"
+ aria-selected={activeTab.value === 'tab-wc'}
+ onClick={() => (activeTab.value = 'tab-wc')}
+ >
+ Web Component
+ </button>
+ <button
+ id="tab-compiled"
+ type="button"
+ role="tab"
+ title="Compiled Code"
+ aria-label="Compiled Code"
+ aria-selected={activeTab.value === 'tab-compiled'}
+ onClick={() => (activeTab.value = 'tab-compiled')}
+ >
+ Compiled Code
+ </button>
+ </div>
+
+ <div
+ id="tab-wc"
+ class={`tab-content ${activeTab.value === 'tab-wc' ? 'active' : ''}`}
+ >
+ <slot name="preview-iframe" />
+ </div>
+
+ <div
+ id="tab-compiled"
+ class={`tab-content ${activeTab.value === 'tab-compiled' ? 'active' : ''}`}
+ >
+ <textarea disabled>{code.value}</textarea>
+ </div>
+ </div>
+ </sp-split-view>
+ );
+ }
+
  return (
  <sp-split-view
  class="playground"
  resizable
- label="Resize the horizontal panels"
+ label="Resize the code sections horizontally"
  >
  <div class="original-code">
  <slot name="code-editor" />