diff --git a/ijl.config.js b/ijl.config.js
index 559e9d7..d4e4ed0 100644
--- a/ijl.config.js
+++ b/ijl.config.js
@@ -13,6 +13,11 @@ module.exports = {
features: {
'hub-video-start': {
// add your features here in the format [featureName]: { value: string }
+ "keyboard": {
+ "on": true,
+ "value": "true",
+ "key": "keyboard"
+ }
},
},
config: {
diff --git a/src/assets/503702d8-c8e2-4dd9-b05b-3c12e282d1cb.png b/src/assets/503702d8-c8e2-4dd9-b05b-3c12e282d1cb.png
new file mode 100644
index 0000000..c8e6d68
Binary files /dev/null and b/src/assets/503702d8-c8e2-4dd9-b05b-3c12e282d1cb.png differ
diff --git a/src/components/keyboard.style.ts b/src/components/keyboard.style.ts
new file mode 100644
index 0000000..df96a5c
--- /dev/null
+++ b/src/components/keyboard.style.ts
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+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;
+`;
+
+export const KeyRow = styled.div`
+ display: flex;
+`;
+
+export const Key = styled.button`
+ margin: 4px;
+ width: 64px;
+ height: 64px;
+ 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;
+`;
\ No newline at end of file
diff --git a/src/components/keyboard.tsx b/src/components/keyboard.tsx
new file mode 100644
index 0000000..68f3492
--- /dev/null
+++ b/src/components/keyboard.tsx
@@ -0,0 +1,28 @@
+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 (
+