fln-espranza 1.1.6 → 1.1.8

package/components/Drawer.tsx

@@ -9,16 +9,29 @@ import Avatar from "./Avatar";
 import { Colors } from "../utils/Color";
 import MenuItems from "./MenuItems";
 
-const Drawer = ({ navigation }: any) => {
+type menuItems = {
+    title: string,
+    icon: any,
+    screen: string,
+} 
+
+interface IProps{
+    name: string,
+    profile: string,
+    menuItems: menuItems[];
+    navigation: any;
+}
+
+const Drawer = ({name,profile, menuItems,navigation }: IProps) => {
   return (
     <ScrollView
       scrollEnabled={true}
       showsVerticalScrollIndicator={false}
       style={{
         position: 'relative',
-        backgroundColor: '#fff',
+        backgroundColor: '#ffffff',
       }}>
-      <View style={tw`mx-4`}>
+      <View style={tw`mx-4 pt-4`}>
         <Spacer height={30} />
 
         <View style={tw`flex w-full mt-5`}>
@@ -26,41 +39,33 @@ const Drawer = ({ navigation }: any) => {
             <Avatar
               size="sm"
               source={""}
-              nameFirstLetter={"J"}
+              nameFirstLetter={name?.split("")[0]}
               bg={"sky-400"}
             />
             <View style={tw`ml-3`}>
-              <EText size={"xl"} style={tw`font-bold -mt-1`}>{"Anita Kumar"}</EText>
+              <EText size={"xl"} style={tw`font-bold -mt-1`}>{name}</EText>
               <EText size="sm" style={[tw`font-normal`, {
                 color: Colors["text-body"]
               }]}>
-                {"Mentor"}
+                {profile}
               </EText>
             </View>
           </View>
         </View>
 
         <Spacer height={30} />
-        <MenuItems
-          title={"Dashboard"}
-          icon={<HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
-        />
-        <MenuItems
-          title={"School Visit"}
-          icon={<CalendarIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
-        />
-        <MenuItems
-          title={"Review Meeting"}
-          icon={<TemplateIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
-        />
-        <MenuItems
-          title={"Mentoring Resources"}
-          icon={<ViewBoardsIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
-        />
-        <MenuItems
-          title={"Cluster Performance"}
-          icon={<TemplateIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
-        />
+        {
+          menuItems.map((item, index) => {
+            return (
+              <MenuItems
+                key={index}
+                title={item.title}
+                icon={item.icon}
+                onPress={() => navigation.navigate(item.screen)}
+              />
+            )
+          })
+        }
         <Spacer />
         <Spacer />
         <MenuItems

package/components/EDateAndTimeCard.tsx

@@ -36,10 +36,10 @@ export default function EDateAndTimeCard( {date, month, day, time}: IProps) {
           {day}
         </EText>
         <View style={tw`flex-row justify-center items-center mt-2`}>
-          <ClockIcon size={16} style={tw`text-slate-400`} />
+          <ClockIcon size={14} style={tw`text-slate-400`} />
           <EText
             size="sm"
-            style={tw`ml-1 text-slate-400 font-medium`}
+            style={tw`ml-0.5 text-slate-400 font-medium`}
           >
             {time}
           </EText>

package/components/EProfile.tsx

@@ -27,9 +27,9 @@ export default function EProfile({ name, subjectName, border, children, titleSiz
         />
         <View style={tw`ml-3`}>
           <EText style={[tw`${titleSize}`, { color: Colors['text-primary'] }]}>{name}</EText>
-          <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
+          {subjectName ? <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
             {subjectName}
-          </EText>
+          </EText> : null}
         </View>
       </View>
       {

package/components/PageHeader.tsx

@@ -50,7 +50,7 @@ export default function PageHeader({
   return (
     <View style={[tw`${curved ? "-mb-2" : ""} ${border ? "border-b border-slate-300" : ""} `, {}]}>
       <View style={tw`overflow-hidden`}>
-        {curved ? (
+        {/* curved ? (
           <Image
             resizeMode="cover"
             // source={require("../assets/images/bg-header.jpg")}
@@ -59,7 +59,7 @@ export default function PageHeader({
               { width: SCREEN_WIDTH, borderBottomRightRadius: 32 },
             ]}
           />
-        ) : null}
+          ) : null */}
         <Animated.View
           style={[
             tw`flex-row pr-4 pl-3 pb-3`,
@@ -76,7 +76,7 @@ export default function PageHeader({
             {menuButton ?
               <MenuIcon
                 onPress={() => navigation?.openDrawer()}
-                size={20}
+                size={24}
                 // onPress={() => navigation.navigate("Dashboard")}
                 style={tw`text-slate-900 mt-2`}
               />
@@ -84,7 +84,7 @@ export default function PageHeader({
 
               <EButtonIcon
                 iconColor={curved ? "white" : "tint-slate-900"}
-                size={20}
+                size={24}
                 // onPress={() => navigation.navigate("Dashboard")}
                 onPress={() => navigation.goBack()}
               />
@@ -92,7 +92,7 @@ export default function PageHeader({
           </Animated.View>
           <View style={tw`flex-1 items-center`}>
             <EText
-              size="sm"
+              size="base"
               style={tw.style("text-black font-semibold ", curved && "text-white ")}
             >
               {title}

package/components/ProgressBar.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated,StyleSheet, View } from 'react-native';
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+
+interface IProps{
+    progress: number;
+}
+
+export default function ProgressBar( {progress}: IProps) {
+
+
+    const barWidth = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.spring(barWidth, {
+            toValue: progress,
+            bounciness: 0,
+            speed: 1,
+            useNativeDriver: false,
+        }).start();
+    }, [progress]);
+    return (
+        <View style={[tw`h-2 w-14 bg-[${Colors['primary-light']}] overflow-hidden mr-2`, {
+            borderRadius: 40,
+        }]}>
+            <Animated.View
+                style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
+
+            />
+        </View>
+    )
+}

package/components/SecondaryBaseLayout.tsx

@@ -61,7 +61,7 @@ export default function SecondaryBaseLayout({
       {/* HEADER */}
       <View
         style={[
-          tw`absolute top-0 right-0 left-0 pr-3 pt-2 z-10 w-full bg-white  ${title ? 'mb-1' : 'pb-0'}`,
+          tw`absolute top-0 right-0 left-0 pt-2 z-10 w-full bg-white  ${title ? 'mb-1' : 'pb-0'}`,
           // {height: 64},
         ]}
       >
@@ -93,7 +93,7 @@ export default function SecondaryBaseLayout({
       >
         {children}
       </ScrollView>
-      {bottomButton ? <View style={tw` px-4 mb-4 `}>
+      {bottomButton ? <View style={tw` px-4 mb-6 `}>
         {bottomButton}
       </View> : <></>}
     </View>

package/components/Spacer.tsx

@@ -3,11 +3,12 @@ import React from "react";
 import tw from '../lib/tailwind'
 
 export default function Spacer(props: any) {
-  const { sm, lg, xs } = props;
+  const { sm, lg, xs, md } = props;
   return <View style={tw.style(
     "my-4",
     xs && "my-1",
     sm && "my-2",
+    md && "my-3",
     lg && "my-6"
   )} />;
 }

package/components/index.tsx

@@ -26,6 +26,7 @@ import ModalLayout from "./ModalLayout";
 import PageHeader from "./PageHeader";
 import PageHeaderSecondary from "./PageHeaderSecondary";
 import Spacer from "./Spacer";
+import ProgressBar from "./ProgressBar";
 
 export {
   Avatar,
@@ -55,7 +56,8 @@ export {
   EPillButton,
   EProfile,
   SecondaryBaseLayout,
-  Timer
+  Timer,
+  ProgressBar
   
 
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {