refactor: introduce dynamic sizing hooks for responsiveness and improve ReactPanelContainer functionality

Author: bryanlundberg

src/features/content/react/ReactMarkdownContainer.tsx

@@ -1,30 +1,34 @@
 import { IconLicense } from "@tabler/icons-react"
 import React from "react"
+import useDimensions from "~/features/shared/hooks/useDimensions.ts"
+import useWindowSize from "~/features/shared/hooks/useWindowSize.ts"
 
 interface ReactMarkdownContainerProps {
 	children: React.ReactNode
-	tutorial: string
 }
 
-export default function ReactMarkdownContainer({ children, tutorial }: ReactMarkdownContainerProps) {
-	return (
-		<>
-			<div id="title-info" className="absolute left-0 top-14 w-full hidden">
-				<div className="relative">
-					<IconLicense stroke={2} size={14} className="rotate-90 absolute -top-9 left-4.5 text-yellow" />
-					<h2 className="text-[12px] font-bold text-center rotate-90">Contenido</h2>
-				</div>
+export default function ReactMarkdownContainer({ children }: ReactMarkdownContainerProps) {
+	const [ref, { width }] = useDimensions<HTMLElement>()
+	const windowSize = useWindowSize()
+
+	if (width <= windowSize.width / 10) {
+		return (
+			<div ref={ref} className="relative  flex flex-col h-32 items-center justify-center p-2 text-yellow">
+				<IconLicense stroke={2} size={20} className="rotate-90 mx-auto" />
+				<h2 className="font-bold text-center rotate-90 mt-10">Contenido</h2>
 			</div>
-			<article id="article-info" className="scroll-container m-2 overflow-y-auto p-2">
-				<article className="mb-6 text-secondary min-w-[400px]" id="content-markdown">
-					<h2 className="text-xl font-bold mb-2">{tutorial}</h2>
-					{children}
-					<hr className="my-6 border-gray-700" />
-				</article>
-				<div className="flex justify-center pb-2 mt-auto min-w-[400px]">
-					{/*<NavButtons previous={previous} next={next}/>*/}
-				</div>
+		)
+	}
+
+	return (
+		<article ref={ref} className="scroll-container m-2 overflow-y-auto p-2">
+			<article className="mb-6 text-secondary min-w-[400px]" id="content-markdown">
+				{children}
+				<hr className="my-6 border-gray-700" />
 			</article>
-		</>
+			<div className="flex justify-center pb-2 mt-auto min-w-[400px]">
+				{/* <NavButtons previous={previous} next={next} /> */}
+			</div>
+		</article>
 	)
 }

src/features/content/react/ReactPanelContainer.tsx

@@ -1,6 +1,7 @@
 import { IconGripVertical } from "@tabler/icons-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useMemo } from "react"
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
+import useWindowSize from "~/features/shared/hooks/useWindowSize.ts"
 
 interface PanelContainerProps {
 	direction: "horizontal" | "vertical"
@@ -16,17 +17,39 @@ export default function ReactPanelContainer({
 	direction = "horizontal",
 	defaultLayout = [50, 50],
 }: PanelContainerProps) {
+	const { width } = useWindowSize()
+
+	const size = useMemo(() => {
+		if (width >= 1024) return 5
+		if (width >= 768) return 8
+		return 10
+	}, [width])
+
+	const offset = useMemo(() => 4, [])
+
 	return (
-		<PanelGroup direction={direction} className="h-full min-h-0 ">
-			<Panel defaultSize={defaultLayout[0]} className="min-h-0">
+		<PanelGroup direction={direction} className="h-full min-h-0 grow">
+			<Panel
+				defaultSize={defaultLayout[0]}
+				className="min-h-0"
+				minSize={size + offset}
+				collapsible
+				collapsedSize={size}
+			>
 				{first}
 			</Panel>
 			<PanelResizeHandle className={"flex justify-center items-center"}>
 				<div className={"bg-primary mx-auto  cursor-col-resize grow flex items-center justify-center"}>
 					<IconGripVertical size={14} className={direction === "vertical" ? "rotate-90" : ""} />
 				</div>
 			</PanelResizeHandle>
-			<Panel defaultSize={defaultLayout[1]} className="min-h-0">
+			<Panel
+				defaultSize={defaultLayout[1]}
+				className="min-h-0"
+				minSize={size + offset}
+				collapsible
+				collapsedSize={size}
+			>
 				{second}
 			</Panel>
 		</PanelGroup>

src/features/content/react/ReactPlayground.tsx

@@ -1,11 +1,27 @@
+import { IconCode } from "@tabler/icons-react"
+import React from "react"
 import ReactCodeEditor from "~/features/content/react/ReactCodeEditor.tsx"
 import ReactPanelContainer from "~/features/content/react/ReactPanelContainer.tsx"
 import ReactPanelHeader from "~/features/content/react/ReactPanelHeader.tsx"
 import ReactTerminal from "~/features/content/react/ReactTerminal.tsx"
+import useDimensions from "~/features/shared/hooks/useDimensions.ts"
+import useWindowSize from "~/features/shared/hooks/useWindowSize.ts"
 
 export default function ReactPlayground() {
+	const [ref, { width }] = useDimensions<HTMLElement>()
+	const windowSize = useWindowSize()
+
+	if (width <= windowSize.width / 10) {
+		return (
+			<div ref={ref} className="relative  flex flex-col h-32 items-center justify-center p-2 text-yellow">
+				<IconCode size={20} className="rotate-90 mx-auto" />
+				<h2 className="font-bold text-center rotate-90 mt-10">Editor</h2>
+			</div>
+		)
+	}
+
 	return (
-		<div className="flex h-full min-h-0 flex-col">
+		<div ref={ref} className="flex h-full min-h-0 flex-col">
 			<ReactPanelHeader />
 			<ReactPanelContainer
 				direction={"vertical"}

src/features/shared/hooks/useDimensions.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+export type Dimensions = { width: number; height: number }
+
+export default function useDimensions<T extends Element>() {
+	const nodeRef = useRef<T | null>(null)
+	const observerRef = useRef<ResizeObserver | null>(null)
+	const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 })
+
+	const ref = useCallback((node: T | null) => {
+		if (observerRef.current && nodeRef.current) {
+			observerRef.current.unobserve(nodeRef.current)
+		}
+
+		nodeRef.current = node
+
+		if (!node) return
+
+		if (typeof ResizeObserver === "undefined") {
+			const rect = node.getBoundingClientRect()
+			setDimensions({ width: rect.width, height: rect.height })
+			return
+		}
+
+		if (!observerRef.current) {
+			observerRef.current = new ResizeObserver((entries) => {
+				const entry = entries[0]
+				if (!entry) return
+				const { width, height } = entry.contentRect
+				setDimensions({ width, height })
+			})
+		}
+
+		observerRef.current.observe(node)
+	}, [])
+
+	useEffect(() => {
+		return () => {
+			if (observerRef.current) {
+				observerRef.current.disconnect()
+				observerRef.current = null
+			}
+		}
+	}, [])
+
+	return [ref, dimensions] as const
+}

src/features/shared/hooks/useWindowSize.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react"
+
+export default function useWindowSize() {
+	const [windowSize, setWindowSize] = useState({
+		width: typeof window !== "undefined" ? window.innerWidth : 0,
+		height: typeof window !== "undefined" ? window.innerHeight : 0,
+	})
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight,
+			})
+		}
+
+		window.addEventListener("resize", handleResize)
+		return () => window.removeEventListener("resize", handleResize)
+	}, [])
+
+	return windowSize
+}

src/pages/[slug].astro

@@ -33,7 +33,7 @@ const { Content } = await render(tutorial)
         slot="first"
         class="overflow-auto bg-dark-secondary h-full relative flex flex-col bg-light-bg border border-stroke-color ms-2 rounded-lg"
       >
-        <ReactMarkdownContainer tutorial={'Probando Tutorial'}>
+        <ReactMarkdownContainer client:only="react">
           <Content/>
         </ReactMarkdownContainer>
       </div>