From 75e0cceca2cba09047028c05601dab588251ce35 Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Sat, 15 Jul 2023 00:29:40 -0600 Subject: [PATCH] terminal-component-V1 --- package-lock.json | 13 +++- package.json | 1 + src/app/layout.tsx | 7 ++- src/components/Terminal.tsx | 117 ++++++++++++++++++++++++++++++++++- src/{app => css}/globals.css | 0 src/css/terminal.module.css | 83 +++++++++++++++++++++++++ 6 files changed, 215 insertions(+), 6 deletions(-) rename src/{app => css}/globals.css (100%) create mode 100644 src/css/terminal.module.css diff --git a/package-lock.json b/package-lock.json index a01a807..da2e69e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,14 @@ "version": "0.1.0", "dependencies": { "@types/node": "20.2.5", - "@types/p5": "^1.6.2", //TODO + "@types/p5": "^1.6.2", "@types/react": "18.2.7", "@types/react-dom": "18.2.4", "eslint": "8.41.0", "eslint-config-next": "13.4.4", + "lucide-react": "^0.260.0", "next": "13.4.4", - "p5": "^1.6.0", //TODO + "p5": "^1.6.0", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.0.4" @@ -2422,6 +2423,14 @@ "node": ">=10" } }, + "node_modules/lucide-react": { + "version": "0.260.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.260.0.tgz", + "integrity": "sha512-xN6wuhUlcXeS4GsxZpd2DZp+m1jEZPckuCr90nQAXKRNl63GZ4KshIcGmqJEUqEygmv8Rf99MhcwF3DqBqQ9Dg==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/package.json b/package.json index 0fd637a..7d29fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@types/react-dom": "18.2.4", "eslint": "8.41.0", "eslint-config-next": "13.4.4", + "lucide-react": "^0.260.0", "next": "13.4.4", "p5": "^1.6.0", "react": "18.2.0", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 32b7e2a..947b8ae 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ -import './globals.css' +/* import './globals.css'*/ import { Inter } from 'next/font/google' - +import Terminal from '@/components/Terminal' +import Dots from '@/components/Dots' const inter = Inter({ subsets: ['latin'] }) export const metadata = { @@ -16,6 +17,8 @@ export default function RootLayout({ return ( + + {children} diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index f2a7a1b..065d67c 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -1,9 +1,122 @@ +"use client" import React from 'react'; +import { useState, useRef, useEffect } from 'react'; +import styles from '../css/terminal.module.css' +import { ChevronRight, X, Minus, Square } from 'lucide-react'; + const Terminal = () => { + + + const banner = [ + "██╗ ██╗███████╗██╗ ██████╗ ██████╗ ███╗ ███╗███████╗ ", + "██║ ██║██╔════╝██║ ██╔════╝██╔═══██╗████╗ ████║██╔════╝ ", + "██║ █╗ ██║█████╗ ██║ ██║ ██║ ██║██╔████╔██║█████╗ ", + "██║███╗██║██╔══╝ ██║ ██║ ██║ ██║██║╚██╔╝██║██╔══╝ ", + "╚███╔███╔╝███████╗███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║███████╗ ", + " ╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝", + "", + "You can also check my social media:", + "", + "GitHub: AB10110F CodePen: AB10110F", + "Twitter: AB10110F Reddit: AB10110F", + "", + "Type \"help\" to view the available commands" + ] + + const help = [ + "This is the list of commands you can use: \n", + "banner Displays the initial greeting", + "help As you can see it shows a list of commands", + "skills Displays the technologies I'm able to use", + "info Shows all the information of the project", + "cls Clears the content of the terminal", + ] + + const skills = [ + "CSS [██████████████████▁▁▁▁▁▁] C++ [████████████████████▁▁▁▁]", + "", + "Typescript [█████████████▁▁▁▁▁▁▁▁▁▁] PHP [██████████████▁▁▁▁▁▁▁▁▁]", + "", + "React [███████████▁▁▁▁▁▁▁▁▁▁▁▁] Git [██████████████████▁▁▁▁▁▁]", + + ] + + const info = [ + "888b | 888~~ Y88b / ~~~888~~~", + "|Y88b | 888___ Y88b / 888 ", + "| Y88b | 888 Y88b/ 888 ", + "| Y88b | 888 /Y88b 888 ", + "| Y88b| 888 / Y88b 888 ", + "| Y888 888___ / Y88b 888 ", + "", + "This project was built with Next.js 13", + "The icons I used are the lucide-icons" + ] + + const preRef = useRef(null); + const [input, setInput] = useState(""); + const [output, setOutput] = useState(banner.join('\n')); + + useEffect(() => { + if (preRef.current) { + preRef.current.scrollTop = preRef.current.scrollHeight; + } + }, [output]); + return ( -
Prompt
+
+
+
+ + + +
+
+ {
{output}
} + {/* 
{output}
*/} +
+
@guest from portfolio
+
+ + setInput(e.target.value)} + onKeyDown={e=>{ + let newOutput = ""; + if (e.key === "Enter") + { + newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n"; + switch (input) + { + case "banner": + newOutput += banner.join('\n') + break; + case "help": + newOutput += help.join('\n') + break; + case "skills": + newOutput += skills.join('\n') + break; + case "info": + newOutput += info.join('\n') + break; + case "cls": + newOutput = "" + break; + default: + newOutput += "x_x Syntax Error \"" + input + "\" is not a command" + } + setOutput(newOutput) + setInput("") + } + }} + /> +
+
+
) -} +}; export default Terminal \ No newline at end of file diff --git a/src/app/globals.css b/src/css/globals.css similarity index 100% rename from src/app/globals.css rename to src/css/globals.css diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css new file mode 100644 index 0000000..c8d38ef --- /dev/null +++ b/src/css/terminal.module.css @@ -0,0 +1,83 @@ +.terminal +{ + height: 400px; + width: 55%; + background-color: rgb(26, 26, 26); + color: white; + box-sizing: border-box; + font-size: 15px; + overflow-y:auto; + overflow-x: hidden; + border: 1px solid rgb(26, 26, 26); +} + +.windowOptions +{ + display: flex; + justify-content: end; + background-color: rgb(255, 255, 255); + height: 30px; + align-items: center; + font-size: 15px; + position: sticky; + top: 0; +} +.windowOptions svg +{ + width: 25px; + height: 30px; + padding: 0 10px; + color: rgb(142, 142, 142); +} +.windowOptions svg:nth-last-child(1):hover +{ + background-color: red; +} + +.windowOptions svg:hover +{ + background-color: rgb(177, 177, 177); + color: white; +} + +.windowOptions article +{ + width: 110px; + display: flex; +} + +.terminal::-webkit-scrollbar{height: 10px; width: 8px;} +.terminal::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;} + +.history +{ + padding: 0 10px; + /* white-space: pre-wrap; + word-wrap: break-word; */ + width: 100%; + color: rgb(214, 214, 214); +} + +.prompt +{ + padding: 0 10px; +} + +.promptDown +{ + display: flex; + flex-direction: row; +} + +.prompt svg{width: 15px;} + +.prompt input +{ + border: none; + outline: none; + width: 80%; + background-color: transparent; + color: white; + /* margin-top: 10px */; + font-size: 15px; +} \ No newline at end of file