From fce57eb72249c867352c2909fcc539f066af72a8 Mon Sep 17 00:00:00 2001 From: Vedat Can Keklik Date: Sun, 21 Jul 2024 18:52:12 +0300 Subject: [PATCH] fix: Grid layout --- lykiadb-playground/app/editor.tsx | 2 +- lykiadb-playground/app/layout.tsx | 4 +- lykiadb-playground/app/page.tsx | 31 +++++++++++++-- lykiadb-playground/package.json | 1 + lykiadb-playground/pnpm-lock.yaml | 64 +++++++++++++++++++++++++++++-- 5 files changed, 93 insertions(+), 9 deletions(-) diff --git a/lykiadb-playground/app/editor.tsx b/lykiadb-playground/app/editor.tsx index 954d906..efa24da 100644 --- a/lykiadb-playground/app/editor.tsx +++ b/lykiadb-playground/app/editor.tsx @@ -26,7 +26,7 @@ const EditorView = () => { padding={10} style={{ fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, + fontSize: 16, }} /> ); diff --git a/lykiadb-playground/app/layout.tsx b/lykiadb-playground/app/layout.tsx index 3314e47..f14af72 100644 --- a/lykiadb-playground/app/layout.tsx +++ b/lykiadb-playground/app/layout.tsx @@ -5,8 +5,8 @@ import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "LykiaDB Playground", + description: "A simple Next.js app to play with LykiaDB", }; export default function RootLayout({ diff --git a/lykiadb-playground/app/page.tsx b/lykiadb-playground/app/page.tsx index 9216548..8ee9e96 100644 --- a/lykiadb-playground/app/page.tsx +++ b/lykiadb-playground/app/page.tsx @@ -1,13 +1,38 @@ +'use client'; + import dynamic from 'next/dynamic'; +import GridLayout from "react-grid-layout"; +import 'react-grid-layout/css/styles.css'; const EditorView = dynamic(() => import('./editor'), { ssr: false, }); + +// layout is an array of objects, see the demo for more complete usage +const layout = [ + { i: "a", x: 0, y: 0, w: 6, h: 12, isResizable: true, resizeHandles: ['se'] }, + { i: "b", x: 6, y: 0, w: 3, h: 6, isResizable: true, resizeHandles: ['se'] }, + { i: "c", x: 6, y: 0, w: 3, h: 6, isResizable: true, resizeHandles: ['se'] } +]; + export default function Home() { return ( -
- +
+ + +
+ +
+
b
+
c
+
); -} +} \ No newline at end of file diff --git a/lykiadb-playground/package.json b/lykiadb-playground/package.json index 4fb0898..33f9b9d 100644 --- a/lykiadb-playground/package.json +++ b/lykiadb-playground/package.json @@ -13,6 +13,7 @@ "prismjs": "^1.29.0", "react": "^18", "react-dom": "^18", + "react-grid-layout": "^1.4.4", "react-simple-code-editor": "^0.14.1" }, "devDependencies": { diff --git a/lykiadb-playground/pnpm-lock.yaml b/lykiadb-playground/pnpm-lock.yaml index ec903b3..78eb41d 100644 --- a/lykiadb-playground/pnpm-lock.yaml +++ b/lykiadb-playground/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + react-grid-layout: + specifier: ^1.4.4 + version: 1.4.4(react-dom@18.3.1)(react@18.3.1) react-simple-code-editor: specifier: ^0.14.1 version: 0.14.1(react-dom@18.3.1)(react@18.3.1) @@ -882,6 +885,16 @@ packages: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} dev: false + /clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + dev: false + + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -1598,6 +1611,10 @@ packages: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true + /fast-equals@4.0.3: + resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==} + dev: false + /fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} engines: {node: '>=8.6.0'} @@ -2405,7 +2422,6 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-hash@3.0.0: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} @@ -2674,7 +2690,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} @@ -2701,9 +2716,48 @@ packages: scheduler: 0.23.2 dev: false + /react-draggable@4.4.6(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==} + peerDependencies: + react: '>= 16.3.0' + react-dom: '>= 16.3.0' + dependencies: + clsx: 1.2.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + + /react-grid-layout@1.4.4(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==} + peerDependencies: + react: '>= 16.3.0' + react-dom: '>= 16.3.0' + dependencies: + clsx: 2.1.1 + fast-equals: 4.0.3 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-draggable: 4.4.6(react-dom@18.3.1)(react@18.3.1) + react-resizable: 3.0.5(react-dom@18.3.1)(react@18.3.1) + resize-observer-polyfill: 1.5.1 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true + + /react-resizable@3.0.5(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==} + peerDependencies: + react: '>= 16.3' + dependencies: + prop-types: 15.8.1 + react: 18.3.1 + react-draggable: 4.4.6(react-dom@18.3.1)(react@18.3.1) + transitivePeerDependencies: + - react-dom + dev: false /react-simple-code-editor@0.14.1(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==} @@ -2758,6 +2812,10 @@ packages: set-function-name: 2.0.2 dev: true + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'}