diff --git a/package-lock.json b/package-lock.json index c3926f1..f62dfdd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,6 +59,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", @@ -8304,6 +8305,17 @@ } } }, + "node_modules/react-resizable-panels": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.2.tgz", + "integrity": "sha512-Ku2Bo7JvE8RpHhl4X1uhkdeT9auPBoxAOlGTqomDUUrBAX2mVGuHYZTcWvlnJSgx0QyHIxHECgGB5XVPUbUOkQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", diff --git a/package.json b/package.json index e47e963..cc55f99 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,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", diff --git a/src/App.tsx b/src/App.tsx index a775924..4299532 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() {