addd keyboard feature

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: {

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;
+`;

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 (
+        <Wrapper>
+            {rows.map((row, index) => (
+                <KeyRow key={index}>
+                    {row.map(key => (
+                        <Key key={key} onClick={handleClick(key)}>{key}</Key>
+                    ))}
+                </KeyRow>
+            ))}
+        </Wrapper>
+    )
+}

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>
+            <form onSubmit={handleSubmit}>
-                <InputLabel
+                <InputWrapper>
-                    htmlFor='input'
+                    <InputLabel
-                >
+                        htmlFor='input'
-                    Ввод:
+                    >
-                </InputLabel>
+                        Ввод:
-                <InputElement
+                    </InputLabel>
-                    value={value}
+                    <InputElement
-                    onChange={handleChange}
+                        value={value}
-                    id="input"
+                        onChange={handleChange}
-                    autoComplete="off"
+                        onFocus={() => setInfocuse(true)}
-                />
+                        id="input"
-                <IconButton type="submit">
+                        autoComplete="off"
-                    <ArrowImg src={arrow} />
+                    />
-                </IconButton>
+                    <IconButton type="submit">
-            </InputWrapper>
+                        <ArrowImg src={arrow} />
-        </form>
+                    </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;