update version: 0.8.1 change to new code module

package-lock.json

 {
 	"name": "boxdialer",
-	"version": "1.0.0",
+	"version": "0.8.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "boxdialer",
-			"version": "1.0.0",
+			"version": "0.8.0",
 			"license": "ISC",
 			"dependencies": {
 				"@emotion/react": "^11.11.1",

package.json

 {
 	"name": "boxdialer",
-	"version": "0.8.0",
+	"version": "0.8.1",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/boxDialer.js

 /** @format */
 
-import WidjetButton from './components/WidjetButton';
 import { BoxDialer } from './lib/boxDIaler';
+import Root from './root';
 window.BoxDialer = new BoxDialer();
-export default WidjetButton;
+export default Root;

src/components/CallCardDropDown/index.jsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import Block from './style';
-import { data as mockData } from '../WidjetButton/mockTest';
+import { data as mockData } from '../ModalPhoneNumpad/mockTest';
 
 const CallCardDropDown = ({ hiddenState, selectUserFunc }) => {
 	const [inputValue, setinputValue] = useState('');

src/components/DefaultWidjetUi/index.jsx

+/** @format */
+
+import React from 'react';
+import DefaultWidjetStyle, {DialPadIcon} from './style';
+import TimerUi from '../TimerUi';
+
+const DefaultWidjet = ({
+                           widjetState,
+                           phoneNumber,
+                           reason,
+                           widjetVersion,
+                           leftTime,
+                           onClick
+                       }) => {
+    return (
+        <DefaultWidjetStyle status={widjetState} onClick={onClick}>
+            <div className='left'>
+                <p className='title'>{phoneNumber}</p>
+                <p>
+                    <span className='status'>{widjetState}</span>
+                    <TimerUi reason={reason} time={leftTime}/>
+                </p>
+            </div>
+            <div className='right'>
+                <DialPadIcon/>
+            </div>
+            <div className='bottom'>
+                <DefaultWidjetStyle.StatusLine status={widjetState}>
+                    <p className='verison'>v {widjetVersion}</p>
+                </DefaultWidjetStyle.StatusLine>
+            </div>
+        </DefaultWidjetStyle>
+    );
+};
+
+export default DefaultWidjet;

src/components/DefaultWidjetUi/style.js

+/** @format */
+
+import styled from 'styled-components';
+import CallIcon from '@mui/icons-material/Dialpad';
+
+const DefaultWidjetStyle = styled.div`
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	height: 70px;
+	min-width: 180px;
+	max-width: 200px;
+	border-radius: 13px;
+	background-color: #164e63e6;
+	cursor: pointer;
+	color: white;
+	z-index: 999;
+
+	position: fixed;
+	bottom: 30px;
+	left: 50px;
+
+	display: grid;
+	align-items: center;
+	grid-template-columns: 1fr 30px;
+	grid-template-rows: 1fr 10px;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.right {
+	}
+	.title {
+		font-size: 22px;
+		font-weight: 600;
+	}
+	.bottom {
+		height: 100%;
+		grid-column: 1/3;
+		grid-row: 2/3;
+	}
+	.status {
+		border-radius: 10px;
+		padding: 0 5px;
+		margin: 0 5px;
+		background-color: ${({ status }) =>
+			status === 'pending'
+				? 'orange'
+				: status === 'connected'
+				? '#a0c13d'
+				: '#ccc'};
+		color: ${({ status }) =>
+			status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
+	}
+`;
+DefaultWidjetStyle.StatusLine = styled.div`
+	height: 100%;
+	background-color: ${({ backColor }) => backColor};
+	border-bottom-left-radius: 30px;
+	border-bottom-right-radius: 30px;
+	background-color: ${({ status }) =>
+		status === 'pending'
+			? 'orange'
+			: status === 'connected'
+			? '#a0c13d'
+			: '#ccc'};
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 10px 0 0;
+	color: green;
+	.verison {
+		font-size: 10px;
+		font-weight: bold;
+		float: right;
+	}
+`;
+const DialPadIcon = styled(CallIcon)`
+	font-size: 26px;
+`;
+
+export { DialPadIcon };
+export default DefaultWidjetStyle;

src/components/ModalPhoneNumpad/index.jsx

+/** @format */
+
+import React, {useCallback, useEffect, useState} from 'react';
+import ModalPhoneNumpadStyle, {NumberButton, Input} from './style'
+import numbers from "./numbers"
+import DropDownTailwind from "../TailwindComponents/DropDown"
+import CallIcon from "@mui/icons-material/Call"
+import {toast} from "react-hot-toast"
+
+const ModalPhoneNumpad = ({
+                              phoneModal,
+                              modalState,
+                              reasons,
+                              reason,
+                              onSetDnd,
+                              dynamicValue
+}) => {
+
+    const boxDialer = window.BoxDialer;
+
+    const [inputValue, setInputValue] = useState('');
+
+
+
+    useEffect(() => {
+        if (!modalState.bool) setInputValue('');
+    }, [modalState.bool]);
+
+
+    const inputController = ({value, type, from}) => {
+        boxDialer.onSoundType({type: 'pick', bool: true});
+        if (modalState.callType === 'outcoming' && modalState.bool) {
+            boxDialer.sipSendDTMF(value);
+        }
+        switch (type) {
+            case 'add':
+                if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) {
+                    if (from === 'input') return setInputValue(value);
+                    if (from === 'button') setInputValue(inputValue + value);
+                }
+
+                break;
+            case 'delete':
+                if (from === 'button') {
+                    setInputValue(inputValue
+                        .split('')
+                        .slice(0, inputValue.length - 1)
+                        .join(''),);
+                }
+                if (from === 'input') {
+                    setInputValue(value);
+                }
+                break;
+            default:
+                break;
+        }
+    };
+
+    document.onkeydown = function (e) {
+        if (phoneModal && modalState.bool ? false : true) {
+            e = e || window.event;
+            if (e.ctrlKey && e.keyCode === 86) {
+                navigator.clipboard
+                    .readText()
+                    .then((text) => {
+                        inputController({type: 'add', value: text, from: 'button'});
+                    })
+                    .catch((err) => {
+                        console.log('Something went wrong', err);
+                    });
+            }
+            return true;
+        }
+    };
+    const gameState = {
+        toggleCP: (e) => {
+            if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
+                boxDialer.initialized(inputValue);
+            } else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') {
+                inputController({type: 'delete', from: 'button', value: e.value});
+            } else if (phoneModal && (modalState.bool ? false : true) && !isNaN(+e.key)) {
+                inputController({type: 'add', value: e.key, from: 'button'});
+            }
+        },
+    };
+    const handleKeyUp = useCallback((event) => {
+        console.log(event);
+        gameState.toggleCP(event);
+    }, [gameState.toggleCP],);
+
+    useEffect(() => {
+        document.addEventListener('keyup', handleKeyUp);
+
+        return () => {
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [handleKeyUp]);
+
+    const callButton = () => {
+        if (dynamicValue === 'connected') {
+            boxDialer.initialized(inputValue, data.number);
+        } else {
+            toast.error('Please wait', {
+                style: {
+                    zIndex: '99999999999999999',
+                },
+            });
+        }
+    };
+
+    return (
+        <ModalPhoneNumpadStyle
+            hidden={!phoneModal}
+            onClick={(e) => e.stopPropagation()}>
+            <ModalPhoneNumpadStyle.InputArea>
+                <Input disabled type='text' value={inputValue} />
+                {inputValue.length ? (
+                    <Input.BackSpaceIcon
+                        onClick={() =>
+                            inputController({ type: 'delete', from: 'button' })
+                        }
+                    />
+                ) : (
+                    ''
+                )}
+            </ModalPhoneNumpadStyle.InputArea>
+            <ModalPhoneNumpadStyle.ButtonArea>
+                {numbers?.map((mapItem) => (
+                    <NumberButton
+                        key={mapItem.id}
+                        onClick={() => {
+                            mapItem.type === 'number' &&
+                            inputController({
+                                value: mapItem.value,
+                                type: 'add',
+                                from: 'button',
+                            });
+                        }}>
+                        {mapItem.nameNumber}
+                        <NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
+                    </NumberButton>
+                ))}
+                {!modalState.bool ? (
+                    <>
+                        <NumberButton style={{ gridColumn: '1/3' }}>
+                            <DropDownTailwind
+                                selectFunc={onSetDnd}
+                                reasons={reasons}
+                                reason={reason}
+                            />
+                        </NumberButton>
+
+                        <NumberButton
+                            onClick={() => callButton()}
+                            // onClick={() => boxDialer.stopTimer()}
+                            status={dynamicValue}
+                            type={'call_button'}>
+                            <CallIcon />
+                        </NumberButton>
+                    </>
+                ) : (
+                    <>
+                        <div style={{ height: '33px' }}></div>
+                        <div style={{ height: '33px' }}></div>
+                    </>
+                )}
+            </ModalPhoneNumpadStyle.ButtonArea>
+        </ModalPhoneNumpadStyle>
+    );
+};
+
+export default ModalPhoneNumpad;

src/components/ModalPhoneNumpad/style.js

+import styled from 'styled-components'
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace"
+
+const ModalPhoneNumpadStyle = styled.div`
+  width: 230px;
+  position: fixed;
+  bottom: 120px;
+  transition: 0.2s;
+  z-index: 999;
+  transform: translate(${({hidden}) => (hidden ? '-300px' : '325px')}, 0%);
+  left: -300px;
+  background-color: #c9d5d9;
+  border-radius: 20px;
+  padding: 15px;
+  display: grid;
+  grid-template-rows: 40px 1fr;
+  grid-gap: 15px;
+  cursor: default;
+`;
+ModalPhoneNumpadStyle.InputArea = styled.div`
+  position: relative;
+`;
+ModalPhoneNumpadStyle.ButtonArea = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 8px;
+`;
+const Input = styled.input`
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  background-color: #fff;
+  border: 0;
+  padding: 0 35px 0 10px;
+  font-size: 22px;
+  color: #000;
+
+  :focus {
+    border-color: inherit;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    padding: 0 10px;
+    font-size: 24px;
+    outline: 0 none;
+  }
+
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  outline: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
+  color: black;
+  position: absolute;
+  right: 5px;
+  cursor: pointer;
+  top: 50%;
+  transform: translate(0, -50%);
+`;
+
+const NumberButton = styled.div`
+  color: #fff;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 7px;
+  font-size: 22px;
+  cursor: pointer;
+  height: 33px;
+  background-color: ${({
+                         status, type
+                       }) => type === 'call_button' ? status === 'pending' ? 'orange' : status === 'connected' && '#a0c13d' : '#5e5e5e'};
+`;
+NumberButton.Icon = styled.div`
+  font-size: 20px;
+`;
+
+export {NumberButton, Input}
+export default ModalPhoneNumpadStyle

src/components/WidjetButton/index.jsx

@@ -5,10 +5,10 @@ import WidjetBlock, {
 	DialPadIcon,
 	Input,
 	ModalPhoneDropDowm,
-	NumberButton
+	NumberButton,
 } from './style';
 
-import numbers from './numbers';
+import numbers from '../ModalPhoneNumpad/numbers';
 import Modal from '../Modal';
 import packageJson from '../../../package.json';
 
@@ -17,161 +17,22 @@ import { toast } from 'react-hot-toast';
 import DropDownTailwind from '../TailwindComponents/DropDown';
 import TimerUi from '../TimerUi';
 
-const WidjetButton = ({ data, onSetDnd, position }) => {
-	if (!data) {
-		data = {
-			iscloud: true,
-			number: '4003',
-			wsurl: 'cld.alovoice.uz:61040',
-			server_id: 40,
-			secret: '26a830',
-			reason: 'free',
-			lefttime: 231461,
-			reasons: ['free', 'outcalls', 'home', 'totop'],
-		};
-	}
-
-	if (window?.alovoice_wsphone) {
-		// data = window.alovoice_wsphone; // если window.alovoice_wsphone то кроме numpad не какой UI не должен работать
-		data = window.alovoice_wsphone;
-		onSetDnd = window.alovoice_onsetdnd;
-		// console.log(
-		// 	window.BX.rest.callMethod('user.get', {}, (rr) => {
-		// 		console.log(rr.answer.result);
-		// 	}),
-		// );
-	}
-
-	const [phoneModal, setPhoneModal] = useState(false);
-
-	const [inputValue, setInputValue] = useState('');
-	const [dynamicValue, setDynamicValue] = useState('pending');
-	const [modalState, setModalState] = useState(false);
-
-	const boxDialer = window.BoxDialer;
-
-	useEffect(() => {
-		if (data && data?.number) {
-			boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
-			boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
-			boxDialer.sipRegister(data);
-		}
-	}, []);
-
-	useEffect(() => {
-		if (!modalState.bool) setInputValue('');
-	}, [modalState.bool]);
-
-	const inputController = ({ value, type, from }) => {
-		boxDialer.onSoundType({ type: 'pick', bool: true });
-		if (modalState.callType === 'outcoming' && modalState.bool) {
-			boxDialer.sipSendDTMF(value);
-		}
-		switch (type) {
-			case 'add':
-				if (
-					value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length
-				) {
-					if (from === 'input') return setInputValue(value);
-					if (from === 'button') setInputValue(inputValue + value);
-				}
-
-				break;
-			case 'delete':
-				if (from === 'button') {
-					setInputValue(
-						inputValue
-							.split('')
-							.slice(0, inputValue.length - 1)
-							.join(''),
-					);
-				}
-				if (from === 'input') {
-					setInputValue(value);
-				}
-				break;
-			default:
-				break;
-		}
-	};
-	document.onkeydown = function (e) {
-		if (phoneModal && modalState.bool ? false : true) {
-			e = e || window.event;
-			if (e.ctrlKey && e.keyCode === 86) {
-				navigator.clipboard
-					.readText()
-					.then((text) => {
-						inputController({ type: 'add', value: text, from: 'button' });
-					})
-					.catch((err) => {
-						console.log('Something went wrong', err);
-					});
-			}
-			return true;
-		}
-	};
-	const gameState = {
-		toggleCP: (e) => {
-			if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
-				boxDialer.initialized(inputValue, data.number);
-			} else if (
-				phoneModal &&
-				(modalState.bool ? false : true) &&
-				e.key === 'Backspace'
-			) {
-				inputController({ type: 'delete', from: 'button', value: e.value });
-			} else if (
-				phoneModal &&
-				(modalState.bool ? false : true) &&
-				!isNaN(+e.key)
-			) {
-				inputController({ type: 'add', value: e.key, from: 'button' });
-			}
-		},
-	};
-	const handleKeyUp = useCallback(
-		(event) => {
-			console.log(event);
-			gameState.toggleCP(event);
-		},
-		[gameState.toggleCP],
-	);
-
-	useEffect(() => {
-		document.addEventListener('keyup', handleKeyUp);
-
-		return () => {
-			document.removeEventListener('keyup', handleKeyUp);
-		};
-	}, [handleKeyUp]);
-
-	const hangupButton = () => {
-		boxDialer.hangupButtonClick();
-	};
-
-	const callButton = () => {
-		if (dynamicValue === 'connected') {
-			boxDialer.initialized(inputValue, data.number);
-		} else {
-			toast.error('Please wait', {
-				style: {
-					zIndex: '99999999999999999',
-				},
-			});
-		}
-	};
-
-	if (!data || !data?.number) return;
-
+const WidjetButton = ({ version, timer, widjetState }) => {
+	// dynamicValue;
+	// data?.number
+	// data.lefttime;
+	// data?.reason;
+	// packageJson?.version;
 	return (
 		<>
 			<WidjetBlock
 				className='tailwindGlobalCss'
 				id={'responsible-button'}
-				onClick={() => {
-					phoneModal ? setPhoneModal(false) : setPhoneModal(true);
-				}}>
-				<WidjetBlock.AccauntInfo status={dynamicValue}>
+				// onClick={() => {
+				// 	phoneModal ? setPhoneModal(false) : setPhoneModal(true);
+				// }}
+			>
+				{/* <WidjetBlock.AccauntInfo status={dynamicValue}>
 					<div className='left'>
 						<p className='title'>{data?.number}</p>
 						<p>
@@ -187,7 +48,14 @@ const WidjetButton = ({ data, onSetDnd, position }) => {
 							<p className='verison'>v {packageJson?.version}</p>
 						</WidjetBlock.StatusLine>
 					</div>
-				</WidjetBlock.AccauntInfo>
+				</WidjetBlock.AccauntInfo> */}
+
+				{/*
+				phoneModal
+
+
+				*/}
+
 				<ModalPhoneDropDowm
 					hidden={!phoneModal}
 					onClick={(e) => e.stopPropagation()}>
@@ -200,6 +68,7 @@ const WidjetButton = ({ data, onSetDnd, position }) => {
 								}
 							/>
 						) : (
+
 							''
 						)}
 					</ModalPhoneDropDowm.InputArea>

src/index.js

 /** @format */
 
 import React from 'react';
-// import ReactDOM from 'react-dom';
-import { render } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { Toaster } from 'react-hot-toast';
-import WidjetButton from './components/WidjetButton/index';
 import { BoxDialer } from './lib/boxDIaler';
+import Root from './root';
 
 window.BoxDialer = new BoxDialer();
 
@@ -16,6 +14,6 @@ const root = createRoot(container);
 root.render(
 	<React.StrictMode>
 		<Toaster />
-		<WidjetButton />
+		<Root />
 	</React.StrictMode>,
 );

src/lib/boxDIaler.js

@@ -232,7 +232,7 @@ export class BoxDialer {
 				case 'i_new_call':
 					uiState = 'incoming';
 					break;
-				case 'connected':
+				case 'call_connected':
 					uiState = 'connected';
 					break;
 				default:
@@ -300,7 +300,7 @@ export class BoxDialer {
 
 			case 'call_connected':
 				// QORA EKRANDA ULANYAPTI.. SOZINI VAHTGA OZGARTIRISH KERE ( SEKKUNDAMER )
-				this.setGuiPhoneState({ stateCode: 'connected' });
+				this.setGuiPhoneState({ stateCode: this.sipState });
 				break;
 
 			case 'hangup_terminating':
@@ -413,12 +413,11 @@ export class BoxDialer {
 		console.log('sipTransfer');
 	}
 
-	initialized(phoneNumber, phone) {
+	initialized(phoneNumber) {
 		// if (phoneNumber == phone) {
 		// toast.error('Please enter another number');
 		// return;
 		// }
-		console.log('initialized argument', phoneNumber);
 		this.callBxMethods({
 			bxMethodName: 'CallCardSetUiState',
 			bxFuncParams: { uiState: 'connectingOutgoing' },
@@ -442,20 +441,25 @@ export class BoxDialer {
 			});
 		}
 	}
+
 	skipButtonClick() {
 		this.onSoundType({ type: 'ring', bool: false });
 		this.hangupButtonClick();
 	}
 
 	answerButtonClick() {
-		this.onSipStateChange.modalState({
-			bool: true,
-			callType: 'answered',
-			callAnswerType: 'oncoming',
-		});
 		this.oSipSessionCall.accept(this.oConfigCall);
 		this.onSoundType({ type: 'ring', bool: false });
+		this.setGuiPhoneState({
+			funcName: 'modalState',
+			funcParam: {
+				bool: true,
+				callType: 'answered',
+				callAnswerType: 'oncoming',
+			},
+		});
 	}
+
 	sipSendDTMF(c) {
 		if (this.oSipSessionCall && c) {
 			this.oSipSessionCall.dtmf(c);

src/root/index.jsx

+/** @format */
+
+import WidjetButton from '../components/WidjetButton';
+import React, {useCallback, useEffect, useState} from 'react';
+import packageJson from '../../package.json';
+import CallIcon from '@mui/icons-material/Call';
+import {toast} from 'react-hot-toast';
+// import DropDownTailwind from '../components/TailwindComponents/DropDown';
+// import Modal from '../components/Modal';
+// import numbers from '../components/WidjetButton/numbers';
+// import TimerUi from '../components/TimerUi';
+import DefaultWidjet from '../components/DefaultWidjetUi';
+import ModalPhoneNumpad from "../components/ModalPhoneNumpad"
+import Modal from "../components/Modal"
+
+const Root = ({data, onSetDnd, position}) => {
+
+    if (!data) {
+        data = {
+            iscloud: true,
+            number: '4003',
+            wsurl: 'cld.alovoice.uz:61040',
+            server_id: 40,
+            secret: '26a830',
+            reason: 'free',
+            lefttime: 231461,
+            reasons: ['free', 'outcalls', 'home', 'totop'],
+            variant: 'bxmini',
+        };
+    }
+
+    if (window?.alovoice_wsphone) {
+        data = window.alovoice_wsphone;
+        onSetDnd = window.alovoice_onsetdnd;
+    }
+
+    const [phoneModal, setPhoneModal] = useState(false);
+    const [dynamicValue, setDynamicValue] = useState('pending');
+    const [modalState, setModalState] = useState(false);
+
+    const boxDialer = window.BoxDialer;
+
+    useEffect(() => {
+        if (data && data?.number) {
+            boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
+            boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
+            boxDialer.sipRegister(data);
+        }
+    }, []);
+
+
+    const hangupButton = () => {
+        boxDialer.hangupButtonClick();
+    };
+
+    console.log(phoneModal, 'phoneModal')
+
+    if (!data || !data?.number) return;
+    return (
+        <>
+            <DefaultWidjet
+                widjetState={dynamicValue}
+                phoneNumber={data?.number}
+                reason={data?.reason}
+                widjetVersion={packageJson?.version}
+                leftTime={data.lefttime}
+                onClick={() => {
+                    phoneModal ? setPhoneModal(false) : setPhoneModal(true);
+                }}
+            />
+            <ModalPhoneNumpad
+                modalState={modalState}
+                phoneModal={phoneModal}
+                reasons={data?.reasons}
+                reason={data?.reason}
+                onClick={(e) => e.stopPropagation()}
+                dynamicValue={dynamicValue}
+                onSetDnd={onSetDnd}
+            />
+            <Modal
+                className='tailwindGlobalCss'
+                callAnswerType={modalState.callType}
+                hidden={
+                    modalState.bool
+                    // true
+                }
+                callType={
+                    modalState.callType
+                    // 'outcoming'
+                }
+                hangupButton={hangupButton}
+                phoneNumber={
+                    modalState.callType === 'outcoming'
+                        ? 'inputValue'
+                        : modalState.callFromName
+                }
+            />
+        </>
+    );
+};
+export default Root;