Clicking Key Functionally adds

package.json

@@ -9,9 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
+    "redux": "^4.2.1",
     "styled-components": "^5.3.9",
     "uuid": "^9.0.0"
   },

src/components/KeyItem/index.tsx

@@ -1,11 +1,18 @@
+import { useDispatch } from "react-redux"
+import { addClickedKeyValue } from "store/reducers"
 import styled from "styled-components"
 import { IKeyItemProps, IKeyItemType } from "types/keyboardTypes"
 
-export const KeyItem = ({ size, name, subName }: IKeyItemType) => {
-    return <StyledKeyItem  {...{ size }}>
-        <span>{name}</span>
-        <span>{subName}</span>
-    </StyledKeyItem >
+export const KeyItem = ({ size, name, subName, c }: IKeyItemType) => {
+    const dispatch = useDispatch()
+    const addValue = () => dispatch(addClickedKeyValue(name))
+
+    return (
+        <StyledKeyItem  {...{ size, c }} onClick={addValue}>
+            <span>{name}</span>
+            <span>{subName}</span>
+        </StyledKeyItem >
+    )
 }
 
 const StyledKeyItem = styled.div<IKeyItemProps>`
@@ -27,8 +34,8 @@ const StyledKeyItem = styled.div<IKeyItemProps>`
         background:white;
     }
 
-    span:nth-child(1){
-        color:#c1c1c1;
+    span:first-child{
+        color:${({ c }) => c ? "#c1c1c1" : null};
     }
 
     span:nth-child(2){

src/components/Keyboard/index.tsx

@@ -1,22 +1,28 @@
 import { FC } from "react"
 import styled from "styled-components"
 import { KeyboardRow } from '../KeyboardRow/index';
+import { TextArea } from "components/TextArea";
 
 const Keyboard: FC = () => {
     return (
         <KeyboardContainer>
+            <TextArea />
             <KeyboardRow />
         </KeyboardContainer>
     )
 }
 
 const KeyboardContainer = styled.div`
+     display:flex;
+     justify-content:center;
+     flex-direction:column;
+     gap:2rem;
      max-width:1180px;
      min-height:100%;
      background: RGB(26, 26, 26);
      margin:0 auto;
      display:flex;
-     padding:0.3rem;
+     padding:0.2rem;
      border-radius:3px;
      flex-direction:column;
      gap:.15rem;

src/components/KeyboardRow/index.tsx

@@ -7,19 +7,19 @@ export const KeyboardRow = () => {
     const keys: KeyboardKeysType = {
         "rowOne": [
             { id: 'esc', name: 'Esc' },
-            { id: 'tilde', name: '~', subName: '`' },
-            { id: 'exclamation', name: '!', subName: '1' },
-            { id: 'at', name: '@', subName: '2' },
-            { id: 'hash', name: '#', subName: '3' },
-            { id: 'dollar', name: '$', subName: '4' },
-            { id: 'percent', name: '%', subName: '5' },
-            { id: 'caret', name: '^', subName: '6' },
-            { id: 'ampersand', name: '&', subName: '7' },
-            { id: 'asterisk', name: '*', subName: '8' },
-            { id: 'left_parenthesis', name: '(', subName: '9' },
-            { id: 'right_parenthesis', name: ')', subName: '0' },
-            { id: 'hyphen', name: '-', subName: '_' },
-            { id: 'plus', name: '+', subName: '=' },
+            { id: 'tilde', name: '~', subName: '`', c: "g" },
+            { id: 'exclamation', name: '!', subName: '1', c: "g" },
+            { id: 'at', name: '@', subName: '2', c: "g" },
+            { id: 'hash', name: '#', subName: '3', c: "g" },
+            { id: 'dollar', name: '$', subName: '4', c: "g" },
+            { id: 'percent', name: '%', subName: '5', c: "g" },
+            { id: 'caret', name: '^', subName: '6', c: "g" },
+            { id: 'ampersand', name: '&', subName: '7', c: "g" },
+            { id: 'asterisk', name: '*', subName: '8', c: "g" },
+            { id: 'left_parenthesis', name: '(', subName: '9', c: "g" },
+            { id: 'right_parenthesis', name: ')', subName: '0', c: "g" },
+            { id: 'hyphen', name: '-', subName: '_', c: "g" },
+            { id: 'plus', name: '+', subName: '=', c: "g" },
             { id: 'delete', name: "<", size: 1.6 },
         ],
         "rowTwo": [
@@ -34,9 +34,9 @@ export const KeyboardRow = () => {
             { id: "i", name: "i" },
             { id: "o", name: "o" },
             { id: "p", name: "p" },
-            { id: "right-open-bracket", name: '{', subName: "[" },
-            { id: "left-open-bracket", name: '}', subName: "]" },
-            { id: "slash-pipe", name: "|", subName: "\\" },
+            { id: "right-open-bracket", name: '{', subName: "[", c: "g" },
+            { id: "left-open-bracket", name: '}', subName: "]", c: "g" },
+            { id: "slash-pipe", name: "|", subName: "\\", c: "g" },
             { id: "delete", name: "Del" },
         ],
         "rowThree": [
@@ -50,8 +50,8 @@ export const KeyboardRow = () => {
             { id: "j", name: "j" },
             { id: "k", name: "k" },
             { id: "l", name: "l" },
-            { id: "semicolon", name: ":", subName: ";" },
-            { id: "double-quote", name: '"', subName: "'" },
+            { id: "semicolon", name: ":", subName: ";", c: "g" },
+            { id: "double-quote", name: '"', subName: "'", c: "g" },
             { id: "enter", name: "Enter", size: 2.75 },
         ],
         "rowFour": [
@@ -63,9 +63,9 @@ export const KeyboardRow = () => {
             { id: "b", name: "b" },
             { id: "n", name: "n" },
             { id: "m", name: "m" },
-            { id: "<", name: "<" },
-            { id: ">", name: ">" },
-            { id: "?", name: "?" },
+            { id: "<", name: "<", subName: "," },
+            { id: ">", name: ">", subName: "." },
+            { id: "?", name: "?", subName: "/" },
             { id: "^", name: "^" },
             { id: "shift", name: "Shift", size: 2.14 }
         ],
@@ -74,7 +74,7 @@ export const KeyboardRow = () => {
             { id: "ctrl1", name: "Ctrl" },
             { id: "w", name: "W" },
             { id: "alt1", name: "Alt" },
-            { id: "space", name: "space", size: 6.10 },
+            { id: "space", name: "spacec", size: 6.10 },
             { id: "alt2", name: "Alt" },
             { id: "ctrl2", name: "Ctrl" },
             { id: "<>", name: "<>" },

src/components/TextArea/index.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components"
+import { useSelector } from "react-redux"
+
+interface IKeyBoardSelector {
+    keyboard: {
+        typedValue: string[];
+    }
+}
+
+export const TextArea = () => {
+    const { typedValue } = useSelector((state: IKeyBoardSelector) => state.keyboard)
+
+    return (
+        <TextAreaWrapper>
+            <StyledTextArea name="typed_value" id="typed_value" rows={4} readOnly value={typedValue.join("")}></StyledTextArea>
+        </TextAreaWrapper>
+    )
+}
+
+const TextAreaWrapper = styled.div`
+    width: 100%;
+    padding: 0;
+`
+const StyledTextArea = styled.textarea`
+    margin:0;
+    padding:0;
+    width:100%;
+    font-size:3.1rem;
+    min-height:60px;
+    max-height:120px;
+    :focus,:focus-visible{
+        border:none;
+        outline:none;
+    }
+`

src/main.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client';
 import App from './App'
+import { Provider } from 'react-redux';
+import store from 'store/store';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  <Provider {...{ store }}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
 )

src/pages/Home/index.tsx

@@ -3,7 +3,6 @@ import { FC } from "react"
 
 const Home: FC = () => {
     return <main>
-        {/* <TextArea /> */}
         <Keyboard />
     </main>
 }

src/store/index.ts

@@ -0,0 +1,5 @@
+//store
+export { default } from "./store";
+
+//reducers
+export * from "./reducers";

src/store/reducers/index.ts

@@ -0,0 +1,2 @@
+//keyboard
+export { keyboardReducer, addClickedKeyValue } from './keyboard/index';

src/store/reducers/keyboard/index.ts

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { AddClickedKeyValueAction } from '../store-types/index';
+interface IKeyboardState {
+    typedValue: string[];
+}
+
+const KeyboardSlice = createSlice({
+    name: "KeyBoardReducer",
+    initialState: {
+        typedValue: []
+    },
+    reducers: {
+        addClickedKeyValue: (state: IKeyboardState, action: AddClickedKeyValueAction) => {
+            const keyValue = action.payload;
+            state.typedValue.push(keyValue)
+        }
+    }
+})
+
+export const keyboardReducer = KeyboardSlice.reducer;
+export const { addClickedKeyValue } = KeyboardSlice.actions

src/store/reducers/store-types/index.ts

@@ -0,0 +1,4 @@
+export interface AddClickedKeyValueAction {
+    type: string;
+    payload: string;
+}

src/store/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { combineReducers } from 'redux';
+import { keyboardReducer } from "./reducers";
+
+const rootReducer = combineReducers({
+    keyboard: keyboardReducer
+})
+
+const store = configureStore({
+    reducer: rootReducer
+})
+
+export default store;

src/types/index.ts

@@ -1,3 +1,6 @@
+//keyboard types
 import type { IKeyItemProps, IKeyItemType, KeyboardKeysType } from "./keyboardTypes";
 
+//state types
+
 export { IKeyItemProps, IKeyItemType, KeyboardKeysType }

src/types/keyboardTypes/index.ts

@@ -1,12 +1,14 @@
 export interface IKeyItemProps {
     size?: number | null;
+    c?: string | null
 }
 
 export interface IKeyItemType {
     id: string;
-    name?: string;
+    name: string;
     subName?: string | null;
-    size?: number | null
+    size?: number | null;
+    c?: string | null;
 };
 
 export interface KeyboardKeysType {

src/types/statesTypes/index.ts

@@ -0,0 +1,3 @@
+export interface KeyboardState {
+    typedValue: string[];
+}