feat(playground): update mobile layout

Signed-off-by: chankruze <chankruze@gmail.com>

packages/www/src/web-components/play-ground.tsx

@@ -8,6 +8,7 @@ export default async function PlayGround(
   const code = state<string>('');
   const preview: HTMLIFrameElement = self.querySelector('#preview-iframe')!;
   const activeTab = state<string>('tab-wc');
+  const activePanel = state<string>('panel-code');
   const isMobileLayout = state<boolean>(false);
 
   function updateSplitViewOrientation() {
@@ -26,6 +27,12 @@ export default async function PlayGround(
     preview.contentWindow?.postMessage({ code: defaultValue });
   }
 
+  function updateActivePanel(e: MouseEvent) {
+    const button = e.target as HTMLButtonElement;
+    const panelId = button.getAttribute('aria-label') as string;
+    activePanel.value = panelId;
+  }
+
   onMount(() => {
     // Set initial layout based on screen size
     updateSplitViewOrientation();
@@ -74,16 +81,19 @@ export default async function PlayGround(
         cursor: pointer;
         border-bottom: 2px solid transparent;
       }
+
       button[role="tab"]:hover {
         background-color: var(--color-light-gray);
       }
+
       button[role="tab"][aria-selected="true"] {
         border-bottom: 2px solid var(--color-dark);
       }
 
       .tab-content {
         display: none;
       }
+
       .tab-content.active {
         display: flex;
         flex-grow: 1;
@@ -93,83 +103,116 @@ export default async function PlayGround(
     #tab-compiled {
       padding: 0.5rem;
     }
+
     #tab-compiled textarea {
       display: flex;
       flex-grow: 1;
       resize: none;
       field-sizing: content;
       font-size: 1rem;
       border-radius: 0.5rem;
+      padding: 0.5rem;
     }
 
     @media (max-width: 968px) {
       .playground {
         flex-direction: column;
+        gap: 0;
       }
 
-      .original-code {
+      .active-panel {
+        flex: 1 1 0%;
         width: 100%;
-        height: 100%;
+
+        div {
+          width: 100%;
+          height: 100%;
+          padding: 0.5rem;
+        }
+
+        textarea {
+          width: 100%;
+          height: 100%;
+          resize: none;
+          field-sizing: content;
+          font-size: 1rem;
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+        }
       }
 
-      .output {
+      .panel-toggle {
+        margin: auto;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 100%;
+
+        button[role="tab"] {
+          flex: 1;
+          height: 100%;
+          border: none;
+          background: none;
+          padding: 0.25rem 0.5rem;
+          cursor: pointer;
+          border-top: 2px solid transparent;
+        }
+
+        button[role="tab"]:hover {
+          background-color: var(--color-light-gray);
+        }
+
+        button[role="tab"][aria-selected="true"] {
+          border-top: 2px solid var(--color-dark);
+        }
       }
     }
   `;
 
   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" />
+      <section class="playground">
+        <div class="active-panel">
+          {activePanel.value === 'panel-code' ? (
+            <slot name="code-editor" />
+          ) : null}
+          {activePanel.value === 'panel-wc' ? (
+            <slot name="preview-iframe" />
+          ) : null}
+          {activePanel.value === 'panel-compiled' ? (
+            <div>
+              <textarea disabled>{code.value}</textarea>
+            </div>
+          ) : null}
         </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' : ''}`}
+        <div class="panel-toggle">
+          <button
+            role="tab"
+            aria-label="panel-code"
+            aria-selected={activePanel.value === 'panel-code'}
+            onClick={updateActivePanel}
           >
-            <slot name="preview-iframe" />
-          </div>
-
-          <div
-            id="tab-compiled"
-            class={`tab-content ${activeTab.value === 'tab-compiled' ? 'active' : ''}`}
+            Original Code
+          </button>
+          <button
+            role="tab"
+            aria-label="panel-wc"
+            aria-selected={activePanel.value === 'panel-wc'}
+            onClick={updateActivePanel}
           >
-            <textarea disabled>{code.value}</textarea>
-          </div>
+            Web Component
+          </button>
+          <button
+            role="tab"
+            aria-label="panel-compiled"
+            aria-selected={activePanel.value === 'panel-compiled'}
+            onClick={updateActivePanel}
+          >
+            Compiled Code
+          </button>
         </div>
-      </sp-split-view>
+      </section>
     );
   }
 
@@ -207,7 +250,6 @@ export default async function PlayGround(
             Compiled Code
           </button>
         </div>
-
         <div
           id="tab-wc"
           class={`tab-content ${activeTab.value === 'tab-wc' ? 'active' : ''}`}