diff --git a/src/assets/icons/Battery.tsx b/src/assets/icons/Battery.tsx new file mode 100644 index 0000000..32c719f --- /dev/null +++ b/src/assets/icons/Battery.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +const BatteryIcon = (props: React.SVGProps) => { + return ( + + + + + ); +}; + +export { BatteryIcon }; diff --git a/src/assets/icons/Check.tsx b/src/assets/icons/Check.tsx new file mode 100644 index 0000000..2d6470e --- /dev/null +++ b/src/assets/icons/Check.tsx @@ -0,0 +1,18 @@ +// icon:check-lg | Bootstrap https://icons.getbootstrap.com/ | Bootstrap +import * as React from 'react'; + +const CheckIcon = (props: React.SVGProps) => { + return ( + + + + ); +}; + +export { CheckIcon }; diff --git a/src/assets/icons/Keyboard.tsx b/src/assets/icons/Keyboard.tsx new file mode 100644 index 0000000..28e69d8 --- /dev/null +++ b/src/assets/icons/Keyboard.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +const KeyboardIcon = (props: React.SVGProps) => { + return ( + + + + + ); +}; + +export { KeyboardIcon }; diff --git a/src/assets/icons/Wifi.tsx b/src/assets/icons/Wifi.tsx new file mode 100644 index 0000000..ba68370 --- /dev/null +++ b/src/assets/icons/Wifi.tsx @@ -0,0 +1,18 @@ +// icon:wifi | Ant Design Icons https://ant.design/components/icon/ | Ant Design +import * as React from 'react'; + +const WifiIcon = (props: React.SVGProps) => { + return ( + + + + ); +}; + +export { WifiIcon }; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 62af180..47537b7 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,2 +1,6 @@ export { PowerIcon } from './PowerIcon'; export { ArrowRightCircleIcon } from './ArrowRight'; +export { WifiIcon } from './Wifi'; +export { BatteryIcon } from './Battery'; +export { KeyboardIcon } from './Keyboard'; +export { CheckIcon } from './Check'; diff --git a/src/localization/locales/en/main.json b/src/localization/locales/en/main.json index b58c8a3..d327219 100644 --- a/src/localization/locales/en/main.json +++ b/src/localization/locales/en/main.json @@ -4,6 +4,15 @@ "userName": "Amit Raikwar", "loginPasswordText": "Touch ID or Enter password", "loginPasswordText2": "Your password is required to enable Touch ID", - "inputPlaceholder": "Enter Password" + "inputPlaceholder": "Enter Password", + "keyboard": { + "type": "ABC - India", + "option": { + "india": "ABC - India" + }, + "menu": { + "others": "Other source inputs" + } + } } } diff --git a/src/screens/public/Lock/Lock.tsx b/src/screens/public/Lock/Lock.tsx index a88c16d..7abd669 100644 --- a/src/screens/public/Lock/Lock.tsx +++ b/src/screens/public/Lock/Lock.tsx @@ -3,7 +3,11 @@ import { LockProps } from './type'; import { WallpaperComponent } from '@components'; import { settingsStore } from '@settingsStore'; import { wallpaperSelector } from '@settingsStore/selector'; -import { TimeDateComponent, UserLoginComponent } from './component'; +import { + TimeDateComponent, + TopRightComponent, + UserLoginComponent, +} from './component'; const Lock = (props: LockProps) => { const { wallpaper } = settingsStore(wallpaperSelector); @@ -20,6 +24,7 @@ const Lock = (props: LockProps) => { > + diff --git a/src/screens/public/Lock/component/TopRightComponent.tsx b/src/screens/public/Lock/component/TopRightComponent.tsx new file mode 100644 index 0000000..c9e3031 --- /dev/null +++ b/src/screens/public/Lock/component/TopRightComponent.tsx @@ -0,0 +1,76 @@ +import { BatteryIcon, CheckIcon, KeyboardIcon, WifiIcon } from '@assets'; +import { + Box, + Button, + Divider, + IconButton, + MenuItem, + MenuList, + Popover, + PopoverArrow, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverHeader, + PopoverTrigger, + Portal, + useBoolean, +} from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; + +const TopRightComponent = () => { + const { t } = useTranslation(); + const [keyboard, keyBoardToggle] = useBoolean(); + + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +export default TopRightComponent; diff --git a/src/screens/public/Lock/component/UserLogin.tsx b/src/screens/public/Lock/component/UserLogin.tsx index e4ec2db..b51d98b 100644 --- a/src/screens/public/Lock/component/UserLogin.tsx +++ b/src/screens/public/Lock/component/UserLogin.tsx @@ -54,7 +54,7 @@ const UserLoginComponent = () => { width={'64'} position={'fixed'} bottom={'24%'} - px={0} + borderRadius={14} _hover={{ transform: 'scale(1.05)', shadow: '1px', diff --git a/src/screens/public/Lock/component/index.ts b/src/screens/public/Lock/component/index.ts index cffeab6..7ba63d3 100644 --- a/src/screens/public/Lock/component/index.ts +++ b/src/screens/public/Lock/component/index.ts @@ -1,2 +1,3 @@ export { default as UserLoginComponent } from './UserLogin'; export { default as TimeDateComponent } from './TimeDate'; +export { default as TopRightComponent } from './TopRightComponent';