feat: tool | CodeSnippet

package.json

@@ -37,12 +37,14 @@
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.454.0",
     "moment": "^2.30.1",
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.2",
     "react-calendar-heatmap": "^1.9.0",
     "react-chartjs-2": "^5.2.0",
     "react-chatbot-kit": "^2.2.2",
+    "react-codemirror2": "^8.0.0",
     "react-csv": "^2.2.2",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",

src/components/Tools/CodeSnippet/CodeSnippet.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useRef } from "react";
+import {
+    Container,
+    Settings,
+    BackgroundColorInput,
+    LanguageSelect,
+    ButtonGroup,
+    CopyButton,
+    ThemeToggle,
+    Wrapper,
+    CodeContainer,
+    EditorContainer,
+    Editor,
+} from "./CodeSnippetElements";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+    solarizedlight,
+    coldarkDark,
+    atomDark,
+    prism,
+    materialLight,
+    materialDark,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Copy, Check, Sun, Moon } from "lucide-react";
+
+const LANGUAGES = ["javascript", "typescript", "python", "java", "cpp", "csharp", "ruby", "swift", "kotlin", "rust"];
+
+const THEMES = {
+    dark: [coldarkDark, atomDark, materialDark],
+    light: [solarizedlight, prism, materialLight],
+};
+
+const CodeSnippet = () => {
+    const [code, setCode] = useState(`const hello = () => {
+    console.log("Hello, world!");
+};
+
+hello(); // Call the function`);
+    const [backgroundColor, setBackgroundColor] = useState("#1E1E1E");
+    const [language, setLanguage] = useState("javascript");
+    const [isDarkTheme, setIsDarkTheme] = useState(true);
+    const [themeIndex, setThemeIndex] = useState(0);
+    const [isCopied, setIsCopied] = useState(false);
+    const codeRef = useRef(null);
+
+    const handleCopyCode = () => {
+        if (codeRef.current) {
+            navigator.clipboard
+                .writeText(code)
+                .then(() => {
+                    setIsCopied(true);
+                    setTimeout(() => setIsCopied(false), 2000);
+                })
+                .catch((err) => console.error("Failed to copy:", err));
+        }
+    };
+
+    const toggleTheme = () => {
+        setIsDarkTheme(!isDarkTheme);
+        setThemeIndex((prevIndex) => (prevIndex + 1) % (isDarkTheme ? THEMES.dark.length : THEMES.light.length));
+    };
+
+    return (
+        <Wrapper>
+            <Container style={{ display: "flex" }}>
+                {/* Code Editor */}
+                <EditorContainer>
+                    <Editor
+                        as="textarea" // Add this line if `Editor` is a styled component
+                        placeholder="Type or paste your code here..."
+                        value={code}
+                        onChange={(e) => setCode(e.target.value)} // Update this line
+                        style={{
+                            minHeight: "200px",
+                            padding: "10px",
+                            backgroundColor: "#1E1E1E",
+                            color: "#FFF",
+                            borderRadius: "8px",
+                            outline: "none",
+                            fontFamily: "'Fira Code', monospace",
+                            fontSize: "14px",
+                            lineHeight: "1.5",
+                            overflowY: "auto",
+                        }}
+                    />
+                </EditorContainer>
+
+                {/* Settings and Syntax Highlighter */}
+                <div
+                    style={{
+                        width: "100%",
+                        paddingLeft: "20px",
+                        maxWidth: "1000px",
+                    }}
+                >
+                    <Settings>
+                        <LanguageSelect value={language} onChange={(e) => setLanguage(e.target.value)}>
+                            {LANGUAGES?.map((lang) => (
+                                <option key={lang} value={lang}>
+                                    {lang.charAt(0).toUpperCase() + lang.slice(1)}
+                                </option>
+                            ))}
+                        </LanguageSelect>
+
+                        <BackgroundColorInput
+                            type="color"
+                            value={backgroundColor}
+                            onChange={(e) => setBackgroundColor(e.target.value)}
+                            title="Change Background Color"
+                        />
+
+                        <ButtonGroup>
+                            <ThemeToggle
+                                onClick={toggleTheme}
+                                title={`Switch to ${isDarkTheme ? "Light" : "Dark"} Theme`}
+                            >
+                                {isDarkTheme ? <Sun size={20} /> : <Moon size={20} />}
+                            </ThemeToggle>
+
+                            <CopyButton onClick={handleCopyCode} title="Copy Code">
+                                {isCopied ? <Check size={20} color="green" /> : <Copy size={20} />}
+                            </CopyButton>
+                        </ButtonGroup>
+                    </Settings>
+
+                    <CodeContainer>
+                        <SyntaxHighlighter
+                            ref={codeRef}
+                            language={language}
+                            style={isDarkTheme ? THEMES.dark[themeIndex] : THEMES.light[themeIndex]}
+                            customStyle={{
+                                backgroundColor,
+                                borderRadius: "8px",
+                                padding: "16px",
+                                fontSize: "14px",
+                                lineHeight: "1.5",
+                                fontFamily: "'Fira Code', monospace",
+                                cursor: "text",
+                                maxHeight: "400px",
+                                overflowY: "auto",
+                                width: "max-content",
+                            }}
+                        >
+                            {code.trim() !== "" ? code : "No code provided."}
+                        </SyntaxHighlighter>
+                    </CodeContainer>
+                </div>
+            </Container>
+        </Wrapper>
+    );
+};
+
+export default CodeSnippet;

src/components/Tools/CodeSnippet/CodeSnippetElements.jsx

@@ -0,0 +1,136 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    margin-top: 100px;
+`;
+
+export const Container = styled.div`
+    width: 100%;
+    max-width: 1400px;
+    background-color: #0e0e0e;
+    padding: 15px;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
+    overflow: hidden;
+    display: flex;
+`;
+
+export const EditorContainer = styled.div`
+    width: 100%;
+    max-width: 500px;
+    max-height: 700px;
+    position: relative;
+    background-color: #101010;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%);
+`;
+
+export const Editor = styled.textarea`
+    width: 100%;
+    color: #f8f8f2;
+    font-size: 16px;
+    padding: 12px;
+    height: 100%;
+    background-color: transparent;
+    font-family: "Fira Code", monospace;
+    outline: none;
+    border: none;
+    resize: none;
+    line-height: 1.6;
+    border-radius: 8px;
+    overflow: auto;
+`;
+
+export const Settings = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background-color: #121212;
+    border-bottom: 1px solid #333;
+`;
+
+export const LanguageSelect = styled.select`
+    background-color: #1c1c1c;
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    margin-right: 10px;
+    font-size: 14px;
+`;
+
+export const BackgroundColorInput = styled.input`
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-right: 10px;
+
+    &::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+        border: none;
+        border-radius: 50%;
+    }
+`;
+
+export const ButtonGroup = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+export const ThemeToggle = styled.button`
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 8px;
+    border-radius: 6px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: #444;
+    }
+`;
+
+export const CopyButton = styled.button`
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 8px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: #444;
+    }
+`;
+
+export const CodeContainer = styled.div`
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    overflow: auto;
+    margin-top: 20px;
+    background-color: #171717;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+`;