Merge pull request #21 from paritshivani/main

Header changes
NIUANULP · Mar 14, 2024 · 4c4373f · 4c4373f
2 parents acceb20 + f02ea2b
commit 4c4373f
Showing 1 changed file with 61 additions and 17 deletions.
diff --git a/packages/nulp_elite/src/pages/Courses.js b/packages/nulp_elite/src/pages/Courses.js
@@ -1,7 +1,7 @@
 // Courses.js
 import React from "react";
 import { NativeBaseProvider,Box, Stack, VStack,Text, HStack, Button,  Image,extendTheme,H4,H1,BodyLarge,Avatar,
-  Actionsheet,ScrollView,Heading } from "native-base";
+  Actionsheet,ScrollView,Heading,useDisclose, Menu, Pressable } from "native-base";
 import { Layout,IconByName,SearchLayout,FilterButton,overrideColorTheme } from "@shiksha/common-lib";
 import { Link , useParams} from "react-router-dom";
 
@@ -11,26 +11,73 @@ const Courses = () => {
   // const theme = extendTheme(DEFAULT_THEME);
   const colors = '';  
   const [sortArray, setSortArray] = React.useState([]);
+  const [showModalSort, setShowModalSort] = React.useState(false);
+  const {
+    isOpen,
+    onOpen,
+    onClose
+  } = useDisclose();
+  const logout = () => {
+    alert("logout");
+  };
 
+  const openHelp = () => {
+    alert("openHelp")
+  };
   return (
     <Layout
     isDisabledAppBar={true}
     _header={
       {
+        rightIcon: (
+          <HStack paddingBottom={"25px"}>
+            <IconByName name="CloseCircleFillIcon" />
+          </HStack>
+        ),
         customeComponent: (
           <Box flex={1}  minH={"40px"}>
+
             <HStack>
-          <Image
-          maxH={"140px"}
-              rounded="10px"
-              w={"100%"}
-              h={"100%"}
-              source={{
-                uri: "../assets/nulp_logo.jpeg",
-              }
-               }
-            />
+              <VStack>
+            <Menu w="190" trigger={triggerProps => {
+      return <Pressable accessibilityLabel="More options menu" {...triggerProps}>
+                <IconByName size='20px' name='MenuFillIcon' />
+                Menu
+            </Pressable>;
+    }}>
+        <Menu.Item>Arial</Menu.Item>
+        <Menu.Item>Nunito Sans</Menu.Item>
+        <Menu.Item>Roboto</Menu.Item>
+        <Menu.Item>Poppins</Menu.Item>
+        <Menu.Item>SF Pro</Menu.Item>
+        <Menu.Item>Helvetica</Menu.Item>
+        <Menu.Item isDisabled>Sofia</Menu.Item>
+        <Menu.Item>Cookie</Menu.Item>
+      </Menu>
+     </VStack>
+     <VStack></VStack>
+     <VStack>
+            <Image source={require("../assets/nulp_logo.jpeg")} alt="" size="sm" />
+            </VStack>
             </HStack>
+
+            {/* <Right> */}
+            <Box 
+            position={"absolute"}
+            right={"20px"}
+            top={"10px"}>
+            <Menu w="190" trigger={triggerProps => {
+            return <Pressable accessibilityLabel="More options menu" {...triggerProps}>                     
+                      Language
+                  </Pressable>;
+          }}>
+              <Menu.Item>English</Menu.Item>
+              <Menu.Item> Hindi</Menu.Item>
+          </Menu>
+            </Box>
+            {/* </Right> */}
+
+
           {/* <Avatar
            size="48px"
            borderRadius=""
@@ -53,12 +100,7 @@ const Courses = () => {
         // // isEnableSearchBtn: true,
         // subHeading: "Hello",
         // iconComponent: (
-        //   <Link
-        //     to="/Courses"
-        //     style={{ color: "rgb(63, 63, 70)", textDecoration: "none" }}
-        //   >
-        //      <IconByName size='20px' name='Notification2LineIcon' />
-        //   </Link>
+
         // ),
       }
       // <Link
@@ -137,6 +179,8 @@ const Courses = () => {
         Explore Courses
       </Button>
     </Box> 
+
+
  </Layout>
 
   );