From cb423fca64471add8edcdaca5cb5fa1412d0bae2 Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Sun, 27 Nov 2022 17:56:50 +0300
Subject: [PATCH] backspace btn

---
 src/assets/back.svg              | 11 +++++++++++
 src/components/keyboard.style.ts |  5 +++++
 src/components/keyboard.tsx      | 12 ++++++++++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/back.svg

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 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 44.18 44.18" style="enable-background:new 0 0 44.18 44.18;" xml:space="preserve">
+
+	<path d="M10.625,5.09L0,22.09l10.625,17H44.18v-34H10.625z M42.18,37.09H11.734l-9.375-15l9.375-15H42.18V37.09z" fill="#829cdb"/>
+	<polygon fill="#829cdb" points="18.887,30.797 26.18,23.504 33.473,30.797 34.887,29.383 27.594,22.09 34.887,14.797 33.473,13.383 26.18,20.676 
+		18.887,13.383 17.473,14.797 24.766,22.09 17.473,29.383 	"/>
+
+</svg>
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', <BackspaceBtn src={back} />]
 ]
 
 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 (
         <Wrapper>
             {rows.map((row, index) => (