feat: Add resizeable panels (#68)

Author: amareshsm

package-lock.json

@@ -87,6 +87,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "prettier": "^3.3.3",
+    "react-resizable-panels": "^2.1.2",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",

package.json

@@ -5,6 +5,7 @@ import { tools } from "./lib/tools";
 import { Editor } from "./components/editor";
 import { ToolSelector } from "./components/tool-selector";
 import { ThemeProvider } from "./components/theme-provider";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 function App() {
 	const { language, tool, code, setCode } = useExplorer();
@@ -15,26 +16,39 @@ function App() {
 				<div className="flex flex-col h-screen">
 					<Navbar />
 					<div className="h-full overflow-hidden">
-						<div className="grid sm:grid-cols-2 divide-x border-t h-full">
-							<Editor
-								value={code[language]}
-								onChange={value => {
-									setCode({ ...code, [language]: value });
-								}}
-							/>
-							<div className="bg-muted overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
-								<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">
-									<ToolSelector />
-									<div className="flex items-center gap-1">
-										{activeTool.options.map(
-											(Option, index) => (
-												<Option key={index} />
-											),
-										)}
+						<div className="border-t h-full">
+							<PanelGroup
+								direction="horizontal"
+								className="border-t h-full"
+							>
+								<Panel defaultSize={50} minSize={25}>
+									<Editor
+										value={code[language]}
+										onChange={value => {
+											setCode({
+												...code,
+												[language]: value,
+											});
+										}}
+									/>
+								</Panel>
+								<PanelResizeHandle className="w-2 bg-gutter dark:bg-gray-600 bg-gray-200 bg-no-repeat bg-center" />
+								<Panel defaultSize={50} minSize={25}>
+									<div className="bg-muted overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
+										<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">
+											<ToolSelector />
+											<div className="flex items-center gap-1">
+												{activeTool.options.map(
+													(Option, index) => (
+														<Option key={index} />
+													),
+												)}
+											</div>
+										</div>
+										<activeTool.component />
 									</div>
-								</div>
-								<activeTool.component />
-							</div>
+								</Panel>
+							</PanelGroup>
 						</div>
 					</div>
 				</div>

src/App.tsx

@@ -71,6 +71,12 @@ module.exports = {
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
 			},
+			backgroundImage: {
+				gutter: "url('./assets/gutter.png')",
+			},
+			backgroundPosition: {
+				center: "50%",
+			},
 		},
 	},
 	plugins: [