all other staff

src/components/keyboard.style.ts

@@ -1,66 +0,0 @@
-import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
-
-const reveal = keyframes`
-    from {
-        bottom: -600px;
-    }
-    to {
-        bottom: 0;
-    }
-`;
-
-export const Wrapper = styled.div`
-    position: absolute;
-    bottom: 0;
-    left: auto;
-    right: auto;
-    padding: 12px;
-    background-color: #96e8c229;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    animation: ${reveal} .5s;
-    animation-timing-function: cubic-bezier(0, 0.39, 0.29, 1.02);
-
-    @media screen and (max-width: 600px) {
-        padding: 6px;
-    }
-`;
-
-export const KeyRow = styled.div`
-    display: flex;
-`;
-
-export const BackspaceBtn = styled.img`
-    width: 60%;
-`;
-
-export const Key = styled.button`
-    margin: 4px;
-    width: 8vw;
-    max-width: 100px;
-    height: 7vw;
-    max-height: 100px;
-    min-height: 40px;
-    font-size: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #829cdb;
-    border-radius: 6px;
-    background-color: #fff;
-    border: none;
-    box-shadow: 1px 2px 6px #5c7cc9;
-
-    @media screen and (max-width: 600px) {
-        margin: 2px;
-    }
-
-    &:active {
-        background: #f5f5f5;
-        box-shadow: inset 1px 2px 6px #5c7cc9,
-            0px 6px 16px #5c7cc9;
-    }
-`;

src/components/keyboard.tsx

@@ -1,36 +0,0 @@
-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', <BackspaceBtn src={back} />]
-]
-
-export const Keyboard = ({ onChange }) => {
-    const handleClick = (key) => () => {
-        if (typeof key === 'string') {
-            onChange(v => v + key.toUpperCase());
-        } else {
-            onChange(v => v.slice(0, -1))
-        }
-    } 
-    return (
-        <Wrapper>
-            {rows.map((row, index) => (
-                <KeyRow key={index}>
-                    {row.map(key => (
-                        <Key key={key} onClick={handleClick(key)}>{key}</Key>
-                    ))}
-                </KeyRow>
-            ))}
-        </Wrapper>
-    )
-}