From 6a83fec490060d89925528f9834ea6b1b7af165f Mon Sep 17 00:00:00 2001
From: Xiaoxing Hu <hi@xiaoxing.dev>
Date: Wed, 1 Nov 2023 19:20:49 +1300
Subject: [PATCH] [website] show render tab when split view

---
 website/src/components/magic.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/website/src/components/magic.tsx b/website/src/components/magic.tsx
index 2e6560a4..ea55b986 100644
--- a/website/src/components/magic.tsx
+++ b/website/src/components/magic.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react'
+import { useState, type ReactNode, useEffect } from 'react'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 
 interface TabView {
@@ -6,6 +6,8 @@ interface TabView {
   view: ReactNode
 }
 
+const bp = 1024
+
 const getTabClasses = (selected: boolean, ...extra: string[]) => {
   const classes = [
     'px-2 py-1 min-w-[80px]',
@@ -32,6 +34,17 @@ export default function Magic({
   children: ReactNode
 }) {
   const [tabIndex, setTabIndex] = useState(0)
+
+  useEffect(() => {
+    const vw = Math.max(
+      document.documentElement.clientWidth || 0,
+      window.innerWidth || 0
+    )
+    if (vw >= bp) {
+      setTabIndex(1)
+    }
+  }, [])
+
   return (
     <Tabs
       className="grid grid-cols-1 lg:grid-cols-2 grid-rows-[auto_1fr] h-full w-full"