[Adding top app bar]: Adding icons

onemanfighter · May 27, 2024 · bfa0bc5 · bfa0bc5
1 parent 2bccdae
commit bfa0bc5
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 3 deletions.
diff --git a/src/assets/icons/Battery.tsx b/src/assets/icons/Battery.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+const BatteryIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M2 6h5v4H2V6z" />
+      <path d="M2 4a2 2 0 00-2 2v4a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2H2zm10 1a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V6a1 1 0 011-1h10zm4 3a1.5 1.5 0 01-1.5 1.5v-3A1.5 1.5 0 0116 8z" />
+    </svg>
+  );
+};
+
+export { BatteryIcon };
diff --git a/src/assets/icons/Check.tsx 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<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M12.736 3.97a.733.733 0 011.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 01-1.065.02L3.217 8.384a.757.757 0 010-1.06.733.733 0 011.047 0l3.052 3.093 5.4-6.425a.247.247 0 01.02-.022z" />
+    </svg>
+  );
+};
+
+export { CheckIcon };
diff --git a/src/assets/icons/Keyboard.tsx b/src/assets/icons/Keyboard.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+const KeyboardIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M14 5a1 1 0 011 1v5a1 1 0 01-1 1H2a1 1 0 01-1-1V6a1 1 0 011-1h12zM2 4a2 2 0 00-2 2v5a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2z" />
+      <path d="M13 10.25a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm0-2a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm-5 0A.25.25 0 018.25 8h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 018 8.75v-.5zm2 0a.25.25 0 01.25-.25h1.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-1.5a.25.25 0 01-.25-.25v-.5zm1 2a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm-5-2A.25.25 0 016.25 8h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 016 8.75v-.5zm-2 0A.25.25 0 014.25 8h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 014 8.75v-.5zm-2 0A.25.25 0 012.25 8h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 012 8.75v-.5zm11-2a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm-2 0a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm-2 0A.25.25 0 019.25 6h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 019 6.75v-.5zm-2 0A.25.25 0 017.25 6h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 017 6.75v-.5zm-2 0A.25.25 0 015.25 6h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5A.25.25 0 015 6.75v-.5zm-3 0A.25.25 0 012.25 6h1.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-1.5A.25.25 0 012 6.75v-.5zm0 4a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-.5a.25.25 0 01-.25-.25v-.5zm2 0a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-.5z" />
+    </svg>
+  );
+};
+
+export { KeyboardIcon };
diff --git a/src/assets/icons/Wifi.tsx 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<SVGSVGElement>) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M12 21l3.6-4.8c-1-.75-2.25-1.2-3.6-1.2s-2.6.45-3.6 1.2L12 21m0-18C7.95 3 4.21 4.34 1.2 6.6L3 9c2.5-1.88 5.62-3 9-3s6.5 1.12 9 3l1.8-2.4C19.79 4.34 16.05 3 12 3m0 6c-2.7 0-5.19.89-7.2 2.4l1.8 2.4C8.1 12.67 9.97 12 12 12c2.03 0 3.9.67 5.4 1.8l1.8-2.4C17.19 9.89 14.7 9 12 9z" />
+    </svg>
+  );
+};
+
+export { WifiIcon };
diff --git 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
@@ -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
@@ -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) => {
       >
         <WallpaperComponent id={wallpaper} />
       </Box>
+      <TopRightComponent />
       <TimeDateComponent />
       <UserLoginComponent />
     </Box>

diff --git a/src/screens/public/Lock/component/TopRightComponent.tsx 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 (
+    <Box
+      width={'100%'}
+      alignItems={'center'}
+      position={'fixed'}
+      top={'0'}
+      right={'0'}
+      display={'flex'}
+      justifyContent={'flex-end'}
+      marginEnd={'10'}
+      zIndex={0}
+      gap={2}
+    >
+      <Popover>
+        <PopoverTrigger>
+          <Button
+            rightIcon={<KeyboardIcon color="white" />}
+            size={'xs'}
+            variant="none"
+            color={'white'}
+          >
+            {t('LockScreen.keyboard.type')}
+          </Button>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent width={'auto'} bg="#0000007f">
+            <PopoverBody gap={1}>
+              <Button
+                size="xs"
+                width="100%"
+                color="white"
+                bg="transparent"
+                _hover={{ color: 'black', bg: 'white' }}
+                rightIcon={<CheckIcon />}
+              >
+                {t('LockScreen.keyboard.option.india')}
+              </Button>
+              <Divider my={1} />
+              <Button size={'xs'} variant="none" color={'white'} disabled>
+                {t('LockScreen.keyboard.menu.others')}
+              </Button>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+      <BatteryIcon color="white" />
+      <WifiIcon color="white" />
+    </Box>
+  );
+};
+
+export default TopRightComponent;
diff --git 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
@@ -1,2 +1,3 @@
 export { default as UserLoginComponent } from './UserLogin';
 export { default as TimeDateComponent } from './TimeDate';
+export { default as TopRightComponent } from './TopRightComponent';