upd: ui group

Deskripsi:
- ui page group
- ui tab button
- ui list data group
- ui modal bottom drawer
- ui menu item row
- ui tambah data

No Issues

components/borderBottomItem.tsx

@@ -8,11 +8,12 @@ type Props = {
    desc?: string
    rightTopInfo?: string
    onPress?: () => void
+   borderType: 'all' | 'bottom'
 }
 
-export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo }: Props) {
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType }: Props) {
    return (
-      <Pressable style={[Styles.wrapItemBorderBottom]} onPress={onPress}>
+      <Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : Styles.wrapItemBorderAll]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter]}>
             {icon}
             <View style={[Styles.rowSpaceBetween, { width: '85%' }]}>

components/buttonTab.tsx

@@ -0,0 +1,23 @@
+import { ColorsStatus } from "@/constants/ColorsStatus"
+import Styles from "@/constants/Styles"
+import { AntDesign, Feather } from "@expo/vector-icons"
+import { Text, TouchableOpacity } from "react-native"
+
+type Props = {
+   active: string
+   value: string
+   onPress: () => void
+   label: string
+   icon: React.ReactNode
+   n: number
+}
+
+
+export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
+   return (
+      <TouchableOpacity style={[Styles.btnTab, (active == value) ? ColorsStatus.orange : ColorsStatus.white, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
+         {icon}
+         <Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
+      </TouchableOpacity>
+   )
+}

components/drawerBottom.tsx

@@ -0,0 +1,31 @@
+import Styles from "@/constants/Styles"
+import { MaterialIcons } from "@expo/vector-icons"
+import { Modal, Pressable, Text, View } from "react-native"
+
+type Props = {
+   isVisible: boolean
+   setVisible: (value: boolean) => void
+   title?: string
+   children: React.ReactNode
+   animation: 'slide' | 'none' | 'fade'
+}
+
+export default function DrawerBottom({ isVisible, setVisible, title, children, animation }: Props) {
+   return (
+      <Modal animationType={animation} transparent={true} visible={isVisible}>
+         <View style={[Styles.modalBgTransparant]}>
+            <View style={Styles.modalContent}>
+               <View style={Styles.titleContainer}>
+                  <Text style={Styles.textDefault}>{title}</Text>
+                  <Pressable onPress={() => setVisible(false)}>
+                     <MaterialIcons name="close" color="black" size={22} />
+                  </Pressable>
+               </View>
+               <View style={Styles.contentContainer}>
+                  {children}
+               </View>
+            </View>
+         </View>
+      </Modal>
+   )
+}

components/inputForm.tsx

@@ -46,10 +46,10 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
 
 
    return (
-      <View style={{ marginBottom: 10 }}>
+      <View style={[Styles.mb10]}>
          {
             label != undefined && (
-               <Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
+               <Text style={[Styles.mb05, { textTransform: "capitalize" }, error && Styles.cError]}>
                   {label}
                   {required && (<Text style={Styles.cError}>*</Text>)}
                </Text>

components/inputSearch.tsx

@@ -0,0 +1,14 @@
+import { Feather } from "@expo/vector-icons";
+import { InputForm } from "./inputForm";
+
+export default function InputSearch({ onChange }: { onChange?: (val: string) => void }) {
+   return (
+      <InputForm
+         type="default"
+         placeholder="Pencarian"
+         round
+         itemLeft={<Feather name="search" size={20} color="grey" />}
+         onChange={onChange}
+      />
+   )
+}

components/menuItemRow.tsx

@@ -0,0 +1,19 @@
+import Styles from "@/constants/Styles"
+import { Pressable, Text, View } from "react-native"
+
+type Props = {
+   onPress: () => void
+   icon: React.ReactNode
+   title: string
+}
+
+export default function MenuItemRow({ onPress, icon, title }: Props) {
+   return (
+      <Pressable onPress={() => { onPress() }} style={[Styles.btnMenuRow]}>
+         <View style={{ alignItems: 'center' }}>
+            {icon}
+            <Text style={[Styles.mt05]}>{title}</Text>
+         </View>
+      </Pressable>
+   )
+}