rough card panel satic design added

Author: PrasanKumar93

.gitignore

@@ -37,4 +37,6 @@ yarn-error.log*
 next-env.d.ts
 
 .env
-.env.test
+.env.test
+
+temp/

package-lock.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/legacy-modes": "^6.4.2",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.32.0",
@@ -31,4 +32,4 @@
     "eslint-config-next": "^14.2.5",
     "typescript": "^5"
   }
-}
+}

package.json

@@ -1,7 +1,16 @@
-.code-mirror-container {
-    width: 100%;
-    max-width: 100%;
-    overflow: auto;
-    height: 200px;
-    box-sizing: border-box;
-}
+   .comp-code-mirror {
+       flex-grow: 1;
+       display: flex;
+       overflow: auto;
+       box-sizing: border-box;
+       height: 100px;
+
+       .cm-editor {
+           flex-grow: 1;
+           background-color: #111111;
+       }
+
+       .cm-gutters {
+           background-color: #202020;
+       }
+   }

src/app/components/CodeMirrorEditor/index.css

@@ -1,26 +1,34 @@
-import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useState } from 'react';
 import { EditorView, basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
+import { StreamLanguage } from '@codemirror/language';
+import { shell as shellMode } from '@codemirror/legacy-modes/mode/shell';
+
 import { oneDark } from '@codemirror/theme-one-dark';
 
 import './index.css';
 
+import { redisSupport } from './redis-support';
+
 interface CodeMirrorEditorProps {
     initialValue?: string;
     className?: string;
     tabIndex?: number;
     onBlur?: (code: string) => void;
     disabled?: boolean;
+    mode?: 'javascript' | 'shell' | 'redis';
 }
 
+
 const CodeMirrorEditor = React.forwardRef<EditorView | null, CodeMirrorEditorProps>(
     ({
         initialValue = '',
         className = '',
         tabIndex = 99,
         onBlur,
-        disabled = false
+        disabled = false,
+        mode = 'javascript'
     }, ref) => {
         const editorContainerRef = useRef<HTMLDivElement>(null);
         const editorViewRef = useRef<EditorView | null>(null);
@@ -42,12 +50,19 @@ const CodeMirrorEditor = React.forwardRef<EditorView | null, CodeMirrorEditorPro
                 return;
             }
 
+            let modeElm: any = javascript();
+            if (mode === 'shell') {
+                modeElm = StreamLanguage.define(shellMode);
+            } else if (mode === 'redis') {
+                modeElm = redisSupport;
+            }
+
             // Create a new editor state with initial value and extensions
             const state = EditorState.create({
                 doc: initialValue,
                 extensions: [
                     basicSetup,
-                    javascript(),
+                    modeElm,
                     oneDark,
                     EditorView.editable.of(!disabled), // editor read-only if disabled
                 ],
@@ -71,11 +86,15 @@ const CodeMirrorEditor = React.forwardRef<EditorView | null, CodeMirrorEditorPro
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [ref, disabled]);
 
-        return <div ref={editorContainerRef}
-            className={`code-mirror-container ${className}`}
-            tabIndex={tabIndex}
-            onBlur={onEditorBlur}
-        />;
+
+        return (
+            <div ref={editorContainerRef}
+                className={`comp-code-mirror ${className}`}
+                tabIndex={tabIndex}
+                onBlur={onEditorBlur}
+            />
+        )
+
     }
 );
 

src/app/components/CodeMirrorEditor/index.tsx

@@ -0,0 +1,85 @@
+import {
+  LRLanguage,
+  LanguageSupport,
+  defineLanguageFacet,
+} from "@codemirror/language";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { StreamLanguage } from "@codemirror/language";
+
+// Define Redis language with explicit tag mapping
+const redisLanguage = StreamLanguage.define({
+  name: "redis",
+
+  token(stream, state) {
+    if (stream.eatSpace()) return null;
+
+    // Commands
+    if (stream.match(/^(GET|HGET|PING|KEYS|LRANGE)\b/i)) {
+      return "keyword";
+    }
+
+    // Extended Commands
+    if (stream.match(/^(FT\.CREATE|FT\.SEARCH)\b/i)) {
+      return "keyword";
+    }
+
+    // Numbers
+    if (stream.match(/^\d+/)) {
+      return "number";
+    }
+
+    // JSON paths and other identifiers
+    if (stream.match(/^\$\.?\w*/)) {
+      return "property";
+    }
+
+    // Tags and other variables
+    if (stream.match(/^\w+/)) {
+      return "variable";
+    }
+
+    // Strings (e.g., '{dbIndexName}', '{keyPrefix}')
+    if (stream.match(/^'.*?'|".*?"/)) {
+      return "string";
+    }
+
+    // Brackets and delimiters
+    if (stream.match(/^[\[\](),;]/)) {
+      return "bracket";
+    }
+
+    stream.next();
+    return null;
+  },
+});
+
+// Define highlighting style
+const redisHighlightStyle = HighlightStyle.define([
+  // Commands (FT.CREATE, GET, SET, etc.)
+  {
+    tag: tags.keyword,
+    color: "#c8b6f3", //#111111
+    //fontWeight: "bold",
+  },
+
+  // Variables and identifiers
+  { tag: tags.variableName, color: "#c98e75" },
+
+  // Numbers
+  { tag: tags.number, color: "#98c379" },
+
+  // JSON paths ($.productId)
+  { tag: tags.propertyName, color: "#e5c07b" },
+
+  // Strings (quoted values)
+  { tag: tags.string, color: "#e06c75" },
+
+  // Brackets and delimiters
+  { tag: tags.bracket, color: "#56b6c2" },
+]);
+
+// Create language support with highlighting
+export const redisSupport = new LanguageSupport(redisLanguage, [
+  syntaxHighlighting(redisHighlightStyle),
+]);

src/app/components/CodeMirrorEditor/redis-support.ts

@@ -50,7 +50,9 @@ body {
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
+  /* color: rgb(var(--foreground-rgb)); */
+  background-color: #111111;
+  color: #eaeaeb;
 }
 
 a {