سطح سبد خود را بالا ببرید: ساختن یک ترمینال کشیدن و رها کردن در React!

This will set up a basic Next.js project structure for you.

"use client";
import dynamic from "next/dynamic";
import { Rnd } from "react-rnd";

const TerminalComponent = dynamic(() => import("./components/Terminal"), {
  ssr: false, // Important: Disable server-side rendering
});

export default function Home() {
  return (
    
  );
}

// components/Terminal.tsx
"use client";
import React, { useEffect, useRef, useState } from "react";
import type { AvailableCommands, NestedCommands } from "../data/command";

const BashTerminal: React.FC = () => {
  // 1. Importing Dependencies and Defining Types:
  // (Import statements already present)

  // 2. Initializing State Variables:
  const [cmd, setCmd] = useState("");
  const [output, setOutput] = useState("");
  const [history, setHistory] = useState([]);
  const terminalRef = useRef(null);
  const [nestedMode, setNestedMode] = useState(null);

  const hostname = "terminal";
  const username = "terminal";
  const [directory, setDirectory] = useState("~");

  // 3. Utility Functions:
  const print = (text: string, currentOutput: string): string => {
    return currentOutput + text;
  };

  const command = (outputText: string, currentOutput: string): string => {
    return print(`${outputText}\n${username}@${hostname} ${directory} $ `, currentOutput);
  };

  const empty = (currentOutput = ""): string => {
    return print(`${username}@${hostname} ${directory} $ `, currentOutput);
  };

  const setup = (): string => {
    return empty();
  };

  const cd = (dir: string, param: string | undefined): string => {
    if (param === undefined) {
      return "~";
    }
    if (param.charAt(0) === "https://dev.to/") {
      return param;
    }
    return `${dir}/${param}`;
  };

  // 4. Command Definitions:
  const availableCommands: AvailableCommands = {
    pwd: () => directory,
    cd: (tokens) => {
      setDirectory(cd(directory, tokens[1]));
      return null;
    },
    echo: (tokens) => tokens.slice(1).join(" "),
    clear: () => ({ clear: true }),
    history: () => history.join("\n"),
    help: () => "Available commands: clear, echo, cd, pwd, history, help, mycommand",
    mycommand: () => {
      setNestedMode("mycommand");
      return "Entered mycommand mode. Type 'list', 'info', or 'exit'.";
    },
  };

  const nestedCommands: NestedCommands = {
    mycommand: {
      list: () => "Item 1, Item 2, Item 3",
      info: () => "This is info within mycommand.",
      exit: () => {
        setNestedMode(null);
        return `\n${username}@${hostname} ${directory} $ `;
      },
    },
  };

  // 5. Command Execution:
  const run = async (cmd: string): Promise => {
    const tokens = cmd.split(" ");
    const commandName = tokens[0];

    if (nestedMode) {
      if (nestedCommands[nestedMode] && commandName in nestedCommands[nestedMode]) {
        const nestedModeObject = nestedCommands[nestedMode];
        if (typeof nestedModeObject === "object" && nestedModeObject !== null && commandName in nestedModeObject) {
          return nestedModeObject[commandName as keyof typeof nestedModeObject]();
        }
      }
      return `Command not found in ${nestedMode}: ${commandName}`;
    }

    if (commandName in availableCommands) {
      const result = availableCommands[commandName as keyof typeof availableCommands](tokens);
      if (result instanceof Promise) {
        return await result;
      }
      return result;
    }

    return commandName ? `Command not found: ${commandName}` : "";
  };

  // 6. Effect Hooks:
  useEffect(() => {
    setOutput(setup());
    terminalRef.current?.focus();
  }, []);

  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTo({
        top: terminalRef.current.scrollHeight,
        behavior: "smooth",
      });
    }
  }, [output]);

  // 7. Event Handling:
  const handleKeyDown = async (e: React.KeyboardEvent) => {
    if (e.ctrlKey && e.shiftKey && e.key === "V") {
      e.preventDefault();
      navigator.clipboard.readText().then(text => setCmd(prev => prev + text)).catch(err => {
        console.error("Clipboard access failed:", err);
        alert("Clipboard access denied. Please check your browser permissions.");
      });
      return;
    }

    if (e.key === "Backspace") {
      e.preventDefault();
      setCmd(prev => prev.slice(0, -1));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const cmdToRun = cmd.trim();
      if (cmdToRun) {
        setHistory(prev => [...prev, cmdToRun]);
        const result = await run(cmdToRun.toLowerCase());
        setOutput(prev => {
          const commandLine = `${username}@${hostname} ${directory} $ ${cmdToRun}`;
          let resultOutput: string | { clear: boolean } | null = "";
          if (result === null) resultOutput = `${username}@${hostname} ${directory} $ `;
          else if (typeof result === "object" && result.clear) return empty();
          else resultOutput = typeof result === "string" && result.includes("\n") ? result : `\n${command(typeof result === "string" ? result : "", "")}`;
          const lastPromptIndex = prev.lastIndexOf(`${username}@${hostname} ${directory} $ `);
          const cleanedPrev = lastPromptIndex !== -1 ? prev.substring(0, lastPromptIndex) : prev;
          return cleanedPrev + commandLine + (typeof resultOutput === "string" ? resultOutput : "");
        });
      } else setOutput(prev => empty(prev));
      setCmd("");
    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) setCmd(prev => prev + e.key);
  };

  // 8. Rendering the Terminal:
  return (
    
  );
};

export default BashTerminal;

interface AvailableCommands {
  pwd: () => string;
  cd: (tokens: string[]) => string | null;
  echo: (tokens: string[]) => string;
  clear: () => { clear: boolean };
  history: () => string;
  help: () => string;
  mycommand: () => string;
}

interface NestedCommands {
  mycommand: {
    list: () => string;
    info: () => string;
    exit: () => string;
  };
}

export type { AvailableCommands, NestedCommands };