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) => (
-
- ),
- )}
+
+
+ {
+ 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) => (
-
- ),
- )}
+
+
+ {
+ 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() {
}}
/>
-
+