diff --git a/src/App.css b/src/App.css
index e600dea..8b7aa60 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,9 +11,4 @@ html, body, #root {
div { box-sizing: border-box; }
.d-none { display: none; visibility: hidden;}
-.d-flex { display: flex; }
-.d-block { display: flex; }
-.flex-column { flex-direction: column; }
-.flex-row { flex-direction: row; }
-.align-items-center { align-items: center; }
-.justify-center { justify-content: center; }
\ No newline at end of file
+.d-block { display: flex; }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 119e48c..b3bf0f2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,9 @@
import './App.css'
-import VirtualKeyBoard from './Components/virtualKeyBoard'
+import VirtualKeyBoard from './Components/VirtualKeyboard/VirtualKeyboard';
function App() {
return (
- <>
- >
)
}
diff --git a/src/Components/ConvertToPdf.jsx b/src/Components/ConvertToPdf/ConvertToPdf.jsx
similarity index 100%
rename from src/Components/ConvertToPdf.jsx
rename to src/Components/ConvertToPdf/ConvertToPdf.jsx
diff --git a/src/Components/EmojiKeyBoard.jsx b/src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx
similarity index 87%
rename from src/Components/EmojiKeyBoard.jsx
rename to src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx
index 4ffbf1c..1945c1b 100644
--- a/src/Components/EmojiKeyBoard.jsx
+++ b/src/Components/EmojiKeyBoard/EmojiKeyBoard.jsx
@@ -1,4 +1,4 @@
-import { useEmojiData } from "../hooks/useEmojiData";
+import { useEmojiData } from "../../hooks/useEmojiData";
function EmojiKeyBoard({ handleInputButtonClick }) {
const emojiCategories = useEmojiData();
diff --git a/src/Components/KeyBoard/KeyBoard.css b/src/Components/KeyBoard/KeyBoard.css
new file mode 100644
index 0000000..a0c0172
--- /dev/null
+++ b/src/Components/KeyBoard/KeyBoard.css
@@ -0,0 +1,9 @@
+#vk-board {
+ background-color: var(--vk-color-board);
+ height: var(--vk-max-height);
+ padding: 12px;
+ user-select: none;
+}
+
+.d-flex { display: flex; }
+.justify-center { justify-content: center; }
\ No newline at end of file
diff --git a/src/Components/KeyBoard.jsx b/src/Components/KeyBoard/KeyBoard.jsx
similarity index 99%
rename from src/Components/KeyBoard.jsx
rename to src/Components/KeyBoard/KeyBoard.jsx
index a5ad9e5..3c34468 100644
--- a/src/Components/KeyBoard.jsx
+++ b/src/Components/KeyBoard/KeyBoard.jsx
@@ -1,4 +1,4 @@
-import './KeyBoardStylee.css';
+import './KeyBoard.css';
function KeyBoard(props) {
return (
diff --git a/src/Components/KeyBoardLanguage/KeyBoardLanguage.css b/src/Components/KeyBoardLanguage/KeyBoardLanguage.css
new file mode 100644
index 0000000..3626550
--- /dev/null
+++ b/src/Components/KeyBoardLanguage/KeyBoardLanguage.css
@@ -0,0 +1,37 @@
+.language-and-icons {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ white-space: nowrap;
+}
+
+.chooseLanguage {
+ background-color: rgb(255, 255, 255);
+ border: none;
+ color: rgb(3, 3, 3);
+ height: 30px;
+ direction: ltr;
+ font-weight: bold;
+ font-size: 16px;
+ margin: 16px;
+ word-wrap: normal;
+}
+
+.icon img {
+ width: 50px;
+ height: 50px;
+ }
+
+ .icon {
+ background-color: var(--vk-color-key);
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 16px;
+ margin: 12px;
+ padding: 12px;
+ cursor: pointer;
+ transition: .3s;
+ }
+
+ .icon:hover {
+ background-color: var(--vk-color-key-hover);
+ }
\ No newline at end of file
diff --git a/src/Components/KeyBoardLanguage.jsx b/src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx
similarity index 86%
rename from src/Components/KeyBoardLanguage.jsx
rename to src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx
index ecbf186..397b943 100644
--- a/src/Components/KeyBoardLanguage.jsx
+++ b/src/Components/KeyBoardLanguage/KeyBoardLanguage.jsx
@@ -1,9 +1,8 @@
import { FaKeyboard } from "react-icons/fa";
-import "./KeyBoardStylee.css";
-import languagesData from "../LanguagesData";
-import emojiButton from "../assets/images/emojiButton.webp";
-
+import languagesData from "../../LanguagesData";
+import emojiButton from '../../assets/images/emojiButton.webp';
import React, { useState } from 'react';
+import './KeyBoardLanguage.css';
function KeyBoardLanguage(props) {
const setLanguage = props.setLanguage;
diff --git a/src/Components/Screen/Screen.css b/src/Components/Screen/Screen.css
new file mode 100644
index 0000000..6d375b6
--- /dev/null
+++ b/src/Components/Screen/Screen.css
@@ -0,0 +1,19 @@
+.DivTextArea {
+ background: rgb(255, 255, 255);
+ cursor: text;
+ display: inline-block;
+ line-height: 1.15;
+ outline: none;
+ padding: 10px 10px 50px;
+ user-select: text;
+ width: 100%;
+ z-index: 3;
+}
+
+.DivTextArea.center {
+ text-align: center;
+}
+
+.DivTextArea.right {
+ text-align: right;
+}
\ No newline at end of file
diff --git a/src/Components/Screen.jsx b/src/Components/Screen/Screen.jsx
similarity index 91%
rename from src/Components/Screen.jsx
rename to src/Components/Screen/Screen.jsx
index b97b836..a16ec25 100644
--- a/src/Components/Screen.jsx
+++ b/src/Components/Screen/Screen.jsx
@@ -1,4 +1,4 @@
-import './KeyBoardStylee.css';
+import './Screen.css';
function Screen(props) {
const text = props.text;
diff --git a/src/Components/SpecialButtons/SpecialButtons.css b/src/Components/SpecialButtons/SpecialButtons.css
new file mode 100644
index 0000000..192ddbd
--- /dev/null
+++ b/src/Components/SpecialButtons/SpecialButtons.css
@@ -0,0 +1,71 @@
+#spacial_buttons {
+ white-space: nowrap;
+ justify-content: center;
+ right: 5px;
+ bottom: 5px;
+ display: flex;
+ overflow: auto;
+ position: absolute;
+ white-space: nowrap;
+ justify-content: center;
+}
+
+#spacial_buttons button {
+ background-color: var(--vk-color-key);
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 4px;
+ padding: 12px;
+ cursor: pointer;
+ transition: .3s;
+}
+
+#spacial_buttons button:hover {
+ background-color: var(--vk-color-key-hover);
+}
+
+.modal {
+ font-size: 12px;
+ }
+
+ .modal > .header {
+ background-color: rgb(101, 216, 201);
+ width: 100%;
+ border-bottom: 1px solid gray;
+ font-size: 22px;
+ text-align: center;
+ }
+ .modal > .content {
+ width: 100%;
+ font-size: 18px;
+ padding: 10px 5px;
+ }
+ .modal > .actions {
+ width: 100%;
+ padding: 10px 5px;
+ margin: auto;
+ text-align: center;
+ }
+ .modal > .close {
+ cursor: pointer;
+ position: absolute;
+ display: block;
+ padding: 2px 5px;
+ line-height: 20px;
+ right: -10px;
+ top: -10px;
+ font-size: 24px;
+ background: #ffffff;
+ border-radius: 18px;
+ border: 1px solid #cfcece;
+ }
+
+ .popup-content {
+ padding: 0 !important;
+ max-width: 450px;
+ }
+
+ .modal > .actions button,
+ .modal > .actions input[type="button"] {
+ width: 120px;
+ height: 40px;
+ }
\ No newline at end of file
diff --git a/src/Components/SpecialButtons.jsx b/src/Components/SpecialButtons/SpecialButtons.jsx
similarity index 94%
rename from src/Components/SpecialButtons.jsx
rename to src/Components/SpecialButtons/SpecialButtons.jsx
index c4917b4..2e81fc0 100644
--- a/src/Components/SpecialButtons.jsx
+++ b/src/Components/SpecialButtons/SpecialButtons.jsx
@@ -1,16 +1,13 @@
-import React from "react";
import { FaTrashAlt, FaUndo, FaRedo, FaCopy, FaPaste } from "react-icons/fa";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
-import "./KeyBoardStylee.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
-
-import ConvertToPdf from "./ConvertToPdf";
+import ConvertToPdf from "../ConvertToPdf/ConvertToPdf";
import { Tooltip } from 'react-tooltip';
+import './SpecialButtons.css'
-
-function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
+export function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
const notify = () => {
toast("Text is copied to clipboard!");
handleEvent("copy");
@@ -115,6 +112,4 @@ function SpecialButtons({ handleEvent, isUndo, isRedo,text }) {
);
-}
-
-export default SpecialButtons;
+}
\ No newline at end of file
diff --git a/src/Components/StyleSelector/StyleSelector.css b/src/Components/StyleSelector/StyleSelector.css
new file mode 100644
index 0000000..1fc8cda
--- /dev/null
+++ b/src/Components/StyleSelector/StyleSelector.css
@@ -0,0 +1,26 @@
+.d-flex { display: flex; }
+.flex-column { flex-direction: column; }
+
+.style-selector-container {
+ border-top: 1px solid rgb(180, 180, 180);
+ background-color: var(--vk-color-board);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ margin-bottom: 16px;
+ max-width: var(--vk-max-width);
+ padding: 16px;
+ width: 100%;
+ }
+
+ .align-items-center { align-items: center; }
+ .justify-center { justify-content: center; }
+ .flex-row { flex-direction: row; }
+
+ .row.style-selector {
+ margin-top: 16px;
+ }
+
+ .row.style-selector > * {
+ margin-right: 5px;
+ margin-left: 5px;
+ }
diff --git a/src/Components/StyleSelector.jsx b/src/Components/StyleSelector/StyleSelector.jsx
similarity index 97%
rename from src/Components/StyleSelector.jsx
rename to src/Components/StyleSelector/StyleSelector.jsx
index 8780a37..498ed57 100644
--- a/src/Components/StyleSelector.jsx
+++ b/src/Components/StyleSelector/StyleSelector.jsx
@@ -1,9 +1,8 @@
import React, { useState } from "react";
import styled from "styled-components";
import { FaUnderline } from "react-icons/fa";
-import "./KeyBoardStylee.css";
-import { useStyleSelector } from "../hooks/useStyleSelector";
-
+import { useStyleSelector } from "../../hooks/useStyleSelector";
+import './StyleSelector.css';
const FontOption = styled.option`
font-family: ${(props) => props.fontFamily};
diff --git a/src/Components/KeyBoardStylee.css b/src/Components/VirtualKeyboard/VirtualKeyboard.css
similarity index 59%
rename from src/Components/KeyBoardStylee.css
rename to src/Components/VirtualKeyboard/VirtualKeyboard.css
index 9acd6da..4d1f935 100644
--- a/src/Components/KeyBoardStylee.css
+++ b/src/Components/VirtualKeyboard/VirtualKeyboard.css
@@ -100,56 +100,12 @@ select {
padding: 5px;
}
-.DivTextArea {
- background: rgb(255, 255, 255);
- cursor: text;
- display: inline-block;
- line-height: 1.15;
- outline: none;
- padding: 10px 10px 50px;
- user-select: text;
- width: 100%;
- z-index: 3;
-}
-.DivTextArea.center {
- text-align: center;
-}
-
-.DivTextArea.right {
- text-align: right;
-}
-
.screenDiv {
position: relative;
width: 100%;
max-width: var(--vk-max-width);
}
-#spacial_buttons {
- white-space: nowrap;
- justify-content: center;
- right: 5px;
- bottom: 5px;
- display: flex;
- overflow: auto;
- position: absolute;
- white-space: nowrap;
- justify-content: center;
-}
-
-#spacial_buttons button {
- background-color: var(--vk-color-key);
- border: 1px solid rgb(180, 180, 180);
- border-radius: 4px;
- padding: 12px;
- cursor: pointer;
- transition: .3s;
-}
-
-#spacial_buttons button:hover {
- background-color: var(--vk-color-key-hover);
-}
-
.change_layout {
background: rgb(101, 216, 201);
border-radius: 14px 14px 0px 0px;
@@ -159,44 +115,6 @@ select {
/* width: 720px; */
}
-.chooseLanguage {
- background-color: rgb(255, 255, 255);
- border: none;
- color: rgb(3, 3, 3);
- height: 30px;
- direction: ltr;
- font-weight: bold;
- font-size: 16px;
- margin: 16px;
- word-wrap: normal;
-}
-
-.language-and-icons {
- display: flex;
- align-items: center;
- justify-content: space-between;
- white-space: nowrap;
-}
-
-.icon img {
- width: 50px;
- height: 50px;
-}
-
-.icon {
- background-color: var(--vk-color-key);
- border: 1px solid rgb(180, 180, 180);
- border-radius: 16px;
- margin: 12px;
- padding: 12px;
- cursor: pointer;
- transition: .3s;
-}
-
-.icon:hover {
- background-color: var(--vk-color-key-hover);
-}
-
.emoji-keyboard {
display: flex;
flex-direction: column;
@@ -246,17 +164,6 @@ select {
margin-top: 16px;
}
-.style-selector-container {
- border-top: 1px solid rgb(180, 180, 180);
- background-color: var(--vk-color-board);
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- margin-bottom: 16px;
- max-width: var(--vk-max-width);
- padding: 16px;
- width: 100%;
-}
-
.style-selector-container button {
border: none;
}
@@ -270,15 +177,6 @@ select {
background-color: var(--vk-color-key-active);
}
-.row.style-selector {
- margin-top: 16px;
-}
-
-.row.style-selector > * {
- margin-right: 5px;
- margin-left: 5px;
-}
-
.active {
background-color: rgb(20, 122, 139) !important;
}
@@ -288,51 +186,4 @@ select {
background-color: transparent;
border: none;
width: 100%;
-}
-
-.modal {
- font-size: 12px;
-}
-
-.modal > .header {
- background-color: rgb(101, 216, 201);
- width: 100%;
- border-bottom: 1px solid gray;
- font-size: 22px;
- text-align: center;
-}
-.modal > .content {
- width: 100%;
- font-size: 18px;
- padding: 10px 5px;
-}
-.modal > .actions {
- width: 100%;
- padding: 10px 5px;
- margin: auto;
- text-align: center;
-}
-.modal > .close {
- cursor: pointer;
- position: absolute;
- display: block;
- padding: 2px 5px;
- line-height: 20px;
- right: -10px;
- top: -10px;
- font-size: 24px;
- background: #ffffff;
- border-radius: 18px;
- border: 1px solid #cfcece;
-}
-
-.popup-content {
- padding: 0 !important;
- max-width: 450px;
-}
-
-.modal > .actions button,
-.modal > .actions input[type="button"] {
- width: 120px;
- height: 40px;
}
\ No newline at end of file
diff --git a/src/Components/virtualKeyBoard.jsx b/src/Components/VirtualKeyboard/VirtualKeyboard.jsx
similarity index 94%
rename from src/Components/virtualKeyBoard.jsx
rename to src/Components/VirtualKeyboard/VirtualKeyboard.jsx
index 58c0aab..d9b3688 100644
--- a/src/Components/virtualKeyBoard.jsx
+++ b/src/Components/VirtualKeyboard/VirtualKeyboard.jsx
@@ -1,14 +1,13 @@
import { useState, useEffect, useReducer } from "react";
-import KeyBoardLanguage from "./KeyBoardLanguage";
-import Screen from "./Screen";
-import SpecialButtons from "./SpecialButtons";
-import KeyBoard from "./KeyBoard";
-import LetterStyle from "../letterStyle";
-import { getLanguage } from "../LanguagesData";
-import StyleSelector from "./StyleSelector";
-import "./KeyBoardStylee.css";
-import EmojiKeyBoard from "./EmojiKeyBoard";
-
+import KeyBoardLanguage from "../KeyBoardLanguage/KeyBoardLanguage";
+import Screen from "../Screen/Screen";
+import { SpecialButtons } from "../SpecialButtons/SpecialButtons";
+import KeyBoard from "../KeyBoard/KeyBoard";
+import LetterStyle from "../../letterStyle";
+import { getLanguage } from "../../LanguagesData";
+import StyleSelector from "../StyleSelector/StyleSelector";
+import "./VirtualKeyboard.css";
+import EmojiKeyBoard from "../EmojiKeyBoard/EmojiKeyBoard";
const intialLanguage = getLanguage("english");
const initialState = {
@@ -51,18 +50,18 @@ const reducer = (state, action) => {
};
case "deleteLastChar":
- let temp = structuredClone(newStack)
+ let temp = structuredClone(newStack)
temp[temp.length - 1].pop()
-
+
newStack.push(temp[temp.length - 1])
-
+
return {
...state,
isUndo: true,
stack: newStack,
}
case "changeAllText":
-
+
const { itemFunction } = action;
const lastItemIndex = state.stack.length - 1;
if (lastItemIndex >= 0) {
@@ -162,7 +161,7 @@ function VirtualKeyBoard() {
navigator.clipboard.readText().then((text) => {
if (text) {
console.log(text);
- const lastState = stack[stack.length-1];
+ const lastState = stack[stack.length - 1];
text.split("").forEach((item) => lastState.push({ char: item, style: { ...state.currentStyle } }));
console.log(lastState);
dispatch({ type: "paste", text: lastState }); // Pass text as a property
@@ -328,7 +327,7 @@ function VirtualKeyBoard() {
window.removeEventListener("keydown", handleKeyDown);
};
}, [handleEvent]);
-
+
return (
@@ -351,7 +350,7 @@ function VirtualKeyBoard() {
handleEvent={handleEvent}
isUndo={isUndo}
isRedo={isRedo}
- text={ stack.length && stack[stack.length - 1].length
+ text={stack.length && stack[stack.length - 1].length
? stack[stack.length - 1]
: placeholder}
/>