28 lines
688 B
TypeScript
28 lines
688 B
TypeScript
import React from 'react';
|
|
|
|
import {
|
|
Wrapper,
|
|
Key,
|
|
KeyRow,
|
|
} 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']
|
|
]
|
|
|
|
export const Keyboard = ({ onChange }) => {
|
|
const handleClick = (key) => () => onChange(v => v + key);
|
|
return (
|
|
<Wrapper>
|
|
{rows.map((row, index) => (
|
|
<KeyRow key={index}>
|
|
{row.map(key => (
|
|
<Key key={key} onClick={handleClick(key)}>{key}</Key>
|
|
))}
|
|
</KeyRow>
|
|
))}
|
|
</Wrapper>
|
|
)
|
|
} |