addd keyboard feature

src/pages/main.tsx

@@ -1,8 +1,11 @@
 import React, { useState, useCallback } from 'react';
+import { getFeatures } from '@ijl/cli';
 
 import logo from '../assets/logo-white.svg';
 import arrow from '../assets/36-arrow-right.svg';
 
+import { Keyboard } from '../components/keyboard';
+
 import {
     MainWrapper,
     InputElement,
@@ -17,8 +20,11 @@ import {
     StartLabel,
 } from './style';
 
+const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
+
 const Input = ({ onStart }) => {
     const [value, setValue] = useState('');
+    const [inFocuse, setInfocuse] = useState(false);
     const handleChange = useCallback(event => {
         setValue(event.target.value.toUpperCase())
     }, [setValue]);
@@ -31,24 +37,30 @@ const Input = ({ onStart }) => {
     }, [value])
 
     return (
-        <form onSubmit={handleSubmit}>
-            <InputWrapper>
-                <InputLabel
-                    htmlFor='input'
-                >
-                    Ввод:
-                </InputLabel>
-                <InputElement
-                    value={value}
-                    onChange={handleChange}
-                    id="input"
-                    autoComplete="off"
-                />
-                <IconButton type="submit">
-                    <ArrowImg src={arrow} />
-                </IconButton>
-            </InputWrapper>
-        </form>
+        <>
+            <form onSubmit={handleSubmit}>
+                <InputWrapper>
+                    <InputLabel
+                        htmlFor='input'
+                    >
+                        Ввод:
+                    </InputLabel>
+                    <InputElement
+                        value={value}
+                        onChange={handleChange}
+                        onFocus={() => setInfocuse(true)}
+                        id="input"
+                        autoComplete="off"
+                    />
+                    <IconButton type="submit">
+                        <ArrowImg src={arrow} />
+                    </IconButton>
+                </InputWrapper>
+            </form>
+            {keyboardFeature && inFocuse && (
+                <Keyboard onChange={setValue} />
+            )}
+        </>
     )
 }
 

src/pages/style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react'
+import { keyframes } from '@emotion/react';
 
 export const MainWrapper = styled.main`
     display: flex;