diff --git a/src/assets/back.svg b/src/assets/back.svg
new file mode 100644
index 0000000..6d6fc25
--- /dev/null
+++ b/src/assets/back.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/src/components/keyboard.style.ts b/src/components/keyboard.style.ts
index 0e8e147..b695414 100644
--- a/src/components/keyboard.style.ts
+++ b/src/components/keyboard.style.ts
@@ -18,6 +18,11 @@ export const KeyRow = styled.div`
display: flex;
`;
+export const BackspaceBtn = styled.img`
+ width: 60%;
+ /* height: 8px; */
+`;
+
export const Key = styled.button`
margin: 4px;
width: 64px;
diff --git a/src/components/keyboard.tsx b/src/components/keyboard.tsx
index 68f3492..a38a275 100644
--- a/src/components/keyboard.tsx
+++ b/src/components/keyboard.tsx
@@ -1,19 +1,27 @@
import React from 'react';
+import back from '../assets/back.svg';
import {
Wrapper,
Key,
KeyRow,
+ BackspaceBtn,
} from './keyboard.style';
const rows = [
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
- ['z', 'x', 'c', 'v', 'b', 'n', 'm']
+ ['z', 'x', 'c', 'v', 'b', 'n', 'm', ]
]
export const Keyboard = ({ onChange }) => {
- const handleClick = (key) => () => onChange(v => v + key);
+ const handleClick = (key) => () => {
+ if (typeof key === 'string') {
+ onChange(v => v + key.toUpperCase());
+ } else {
+ onChange(v => v.split('').slice(0, -1).join(''))
+ }
+ }
return (
{rows.map((row, index) => (