From be03e9f20a90188700aae6fbd493f6558314dfa3 Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Tue, 24 Sep 2024 03:24:59 +0530 Subject: [PATCH 1/5] feat: add resize option --- package-lock.json | 12 ++++++++ package.json | 1 + src/App.tsx | 67 ++++++++++++++++++++++++------------------ src/assets/gutter.png | Bin 0 -> 91 bytes src/logo.svg | 1 - tailwind.config.js | 6 ++++ 6 files changed, 57 insertions(+), 30 deletions(-) create mode 100644 src/assets/gutter.png delete mode 100644 src/logo.svg diff --git a/package-lock.json b/package-lock.json index 22908e9..9931fbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,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", @@ -8281,6 +8282,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 af12966..241f95f 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,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 0eef1ef..407f291 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 { @@ -40,37 +41,45 @@ function App() {
-
- { - switch (language) { - case "javascript": - setJsCode(value); - break; - case "json": - setJsonCode(value); - break; - case "markdown": - setMarkdownCode(value); - break; - } - }} - /> -
-
- -
- {activeTool.options.map( - (Option, index) => ( -
-
+ +
diff --git a/src/assets/gutter.png b/src/assets/gutter.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac8fa1e03fd46c25f1b22ad9eac95b825edbf91 GIT binary patch literal 91 zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq?9~e978mMlP!v$ov9aKV`7t- p&A3{jqq%P*ci$|_EVVde#<~+X&uyMGX&+EEgQu&X%Q~loCIHDl8R-B3 literal 0 HcmV?d00001 diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index c5d236b..e441a02 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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: [ From b12c9826be501540ea76ba3899f32b6433f8f272 Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Tue, 24 Sep 2024 03:32:51 +0530 Subject: [PATCH 2/5] Update App.tsx --- src/App.tsx | 50 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9c29ff6..185b659 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(); @@ -16,25 +17,38 @@ function App() {
- { - setCode({ ...code, [language]: value }); - }} - /> -
-
- -
- {activeTool.options.map( - (Option, index) => ( -
- -
+ +
From 01ebdf95b5f33f406561f217fcb036eb7ca5e2cc Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Sat, 5 Oct 2024 01:39:56 +0530 Subject: [PATCH 3/5] Update App.tsx --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 185b659..f251960 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,8 +34,8 @@ function App() { -
-
+
+
{activeTool.options.map( From 130886cb2542f49eaf9418ef898c53b05fbea6fe Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Sat, 5 Oct 2024 01:47:09 +0530 Subject: [PATCH 4/5] remove grid --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index f251960..bbcfb2e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ function App() {
-
+
Date: Sat, 5 Oct 2024 01:58:12 +0530 Subject: [PATCH 5/5] Update App.tsx --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index bbcfb2e..4299532 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,7 +32,7 @@ function App() { }} /> - +