fln-espranza 0.0.50 → 0.0.52

package/components/EBadge.tsx

@@ -1,24 +1,82 @@
-import React from 'react'
-import { View } from 'react-native'
+// import React from 'react'
+// import { View } from 'react-native'
+// import tw from '../lib/tailwind';
+// import EText from './EText';
+// import { CheckCircleIcon } from 'react-native-heroicons/solid';
+
+
+// interface IProps {
+//     text: string;
+//     bgColor: string;
+//     textColor: string
+//     completed?: boolean;
+// }
+
+// export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
+//     return (
+//         <View style={[tw`flex-row p-1  px-2 bg-[${bgColor}] rounded-full`,]}>
+//             {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
+//             <EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
+//                 {text}
+//             </EText>
+//         </View>
+//     )
+// }
+
+import React from 'react';
 import tw from '../lib/tailwind';
+import {View} from 'react-native';
 import EText from './EText';
-import { CheckCircleIcon } from 'react-native-heroicons/solid';
 
 
-interface IProps {
-    text: string;
-    bgColor: string;
-    textColor: string
-    completed?: boolean;
-}
+// Badge Sizes
+export const BADGE_SIZES = {
+    sm: 'p-0.75 px-2',
+    md: 'p-0.75 px-3',
+  };
+  export type BadgeSize = keyof typeof BADGE_SIZES;
+  
+  // Badge Text Sizes
+  export const BADGE_TEXT_SIZES = {
+    sm: 'text-sm',
+    md: 'text-base',
+  };
 
-export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
-    return (
-        <View style={[tw`flex-row p-1  px-2 bg-[${bgColor}] rounded-full`,]}>
-            {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
-            <EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
-                {text}
-            </EText>
-        </View>
-    )
+interface EBadgeProps {
+  color?: string;
+  variant?: 'solid' | 'light';
+  size?: BadgeSize;
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  children: string;
 }
+
+const EBadge: React.FC<EBadgeProps> = ({
+  color = 'blue-600',
+  variant = 'solid',
+  size = 'md',
+  iconLeft,
+  iconRight,
+  children,
+}) => {
+  const baseStyle = tw`flex-row self-start items-center rounded-full overflow-hidden bg-${color} 
+  ${variant === 'light' && 'bg-opacity-10'}
+  ${BADGE_SIZES[size]}`;
+
+  const textStyle = tw`font-semibold capitalize
+    ${variant === 'light' ? `text-${color}` : 'text-white'}
+    ${BADGE_TEXT_SIZES[size]}
+    `;
+
+  return (
+    <View style={baseStyle}>
+      {iconLeft}
+      <EText style={textStyle}>{children}</EText>
+      {iconRight}
+    </View>
+  );
+};
+
+export default EBadge;
+
+

package/components/EButton.tsx

@@ -13,7 +13,7 @@ interface EButtonProps extends TouchableOpacityProps {
   iconR?: JSX.Element;
   inline?: boolean;
   small?: boolean;
-  type?: "secondary" | "clear" | "primary";
+  type?: "secondary" | "clear" | "primary" | "white";
   disabled?: boolean;
   children: any;
 }
@@ -38,13 +38,13 @@ export default function EButton({
     >
       <View
         style={[
-          tw`flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-11 px-6' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${
-            type === "clear"
-              ? "bg-transparent "
+          tw`flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-10 px-4' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${type === "clear"
+            ? "bg-transparent "
+            : type === 'white' ? "bg-white"
               : type === "secondary"
-              ? `bg-[${Colors["secondary-base"]}] self-start px-6 h-11`
-              : `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
-          }`,
+                ? `bg-[${Colors["secondary-base"]}] self-start px-6 h-11`
+                : `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
+            }`,
         ]}
       >
         {/* ICON LEFT */}
@@ -52,12 +52,11 @@ export default function EButton({
         {/* LABEL */}
         <EText
           style={[
-            tw`font-semibold ${
-              type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
-            }`,
+            tw`font-semibold ${small ? `text-sm` : ''} ${type === "clear" || type === "white" ? `text-[${Colors["primary-base"]}]` : "text-white"
+              }`,
           ]}
         >
-          {children } 
+          {children}
         </EText>
 
         {/* ICON RIGHT */}

package/components/EListSchool.tsx

@@ -18,7 +18,7 @@ export default function EListSchool({
 }: IProps) {
   return (
     <View style={tw`border-b border-slate-200 py-3`}>
-      <EText style={tw`font-bold text-slate-800 mb-0.5 flex-1`} numberOfLines={2}>
+      <EText size="base" style={tw`font-bold text-slate-800 mb-0.5 h-5`} numberOfLines={2}>
         {name}
       </EText>
       <View style={tw`flex-row items-center`}>

package/components/EPageDescription.tsx

@@ -10,8 +10,7 @@ interface IProps{
 export default function EPageDescription({text}: IProps) {
   return (
     <EText
-        size='sm'
-        style={[tw`font-normal`, {color: Colors['text-body']}]}
+        style={[tw`pr-4`, {color: Colors['text-body']}]}
     >
         {text}
     </EText>

package/components/ETimeLineCard.tsx

@@ -5,6 +5,7 @@ import { Colors } from '../utils/Color';
 import EBadge from './EBadge'
 import EText from './EText';
 import EIconChevronRight from './icons/EIconChevronRight';
+import { CheckCircleIcon } from 'react-native-heroicons/solid';
 
 interface IProps {
   title: string;
@@ -40,13 +41,14 @@ export default function ETimeLineCard({ title, description, completed, disabled,
           </EText>
         </View>
         <View style={tw`ml-4`}>
+
           <EBadge
-            completed={completed}
-            text={
+            color={completed ? `[${Colors['primary-base']}]` : `[${Colors.warning}]`}
+            size='sm'
+          >
+          {
               badgeText ? badgeText : completed ? "Complete" : "Pending"}
-            bgColor={completed ? Colors['primary-base'] : Colors.warning}
-            textColor={"#ffff"}
-          />
+          </EBadge>
         </View>
       </View>
 

package/components/ModalLayout.tsx

@@ -1,10 +1,5 @@
-import {
-  View,
-  Dimensions,
-  ScrollView,
-  Platform,
-} from "react-native";
-import React, { } from "react";
+import { View, Dimensions, ScrollView, Platform } from "react-native";
+import React from "react";
 import Constants from "expo-constants";
 import tw from "../lib/tailwind";
 import EButtonIcon from "./EButtonIcon";
@@ -44,7 +39,9 @@ export default function ModalLayout({
       {/* HEADER */}
       <View
         style={[
-          tw`absolute top-0 right-0 left-0 px-6 pr-3 pt-2 z-10 w-full bg-white   ${title ? 'pb-2 shadow-md' : 'pb-0'}`,
+          tw`absolute top-0 right-0 left-0 px-6 pr-3 pt-2 z-10 w-full bg-white   ${
+            title ? "pb-2 shadow-md" : "pb-0"
+          }`,
           // {height: 64},
         ]}
       >
@@ -73,9 +70,13 @@ export default function ModalLayout({
       >
         {children}
       </ScrollView>
-      {bottomButton ? <View style={tw` px-6 mb-4 pt-2 border-t border-slate-300`}>
-        {bottomButton}
-      </View> : <></>}
+      {bottomButton ? (
+        <View style={tw` px-6 mb-4 pt-2 border-t border-slate-300`}>
+          {bottomButton}
+        </View>
+      ) : (
+        <></>
+      )}
     </View>
   );
 }

package/components/PageHeader.tsx

@@ -78,7 +78,9 @@ export default function PageHeader({
 
                 :
                 <TouchableOpacity activeOpacity={0.6}
-                  onPress={() => navigation.goBack()}>
+                  onPress={() => navigation.goBack()}
+                  style={tw`p-1`}
+                  >
                   <EIconArrowLeft
                     iconColor={curved ? "white" : "tint-slate-900"}
                     size={24}

package/package.json

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