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

app/(application)/_layout.tsx

@@ -11,6 +11,7 @@ export default function RootLayout() {
             <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
             <Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
             <Stack.Screen name="profile" options={{ title: 'Profile' }} />
+            <Stack.Screen name="group" options={{ title: 'Lembaga Desa', headerShown: false }} />
          </Stack>
          <StatusBar style="light" />
       </>

app/(application)/feature.tsx

@@ -25,8 +25,8 @@ export default function Feature() {
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
                <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" />
                <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" />
-               <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" />
+               <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
-               <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" />
+               <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
             </View>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
                <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" />

app/(application)/group/_layout.tsx

@@ -0,0 +1,58 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonMenuHeader from "@/components/buttonMenuHeader";
+import DrawerBottom from "@/components/drawerBottom";
+import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
+import { Headers } from "@/constants/Headers";
+import Styles from "@/constants/Styles";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { router, Stack } from "expo-router";
+import React, { useState } from "react";
+import { Modal, Pressable, Text, TextInput, ToastAndroid, View } from "react-native";
+
+export default function RootLayout() {
+   const [isVisible, setVisible] = useState(false)
+   const [isVisibleTambah, setVisibleTambah] = useState(false)
+
+   function handleTambah() {
+      setVisibleTambah(false)
+      setVisible(false)
+      ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+   }
+
+   return (
+      <>
+         <Stack screenOptions={Headers.shadow}>
+            <Stack.Screen name="index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Lembaga Desa',
+               headerTitleAlign: 'center',
+               headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+            }} />
+         </Stack>
+
+         <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  title="Tambah Lembaga"
+                  onPress={() => { setVisibleTambah(true) }}
+               />
+            </View>
+         </DrawerBottom>
+
+         <DrawerBottom animation="none" isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
+            <View style={{ justifyContent: 'space-between', flex: 1 }}>
+               <View>
+                  <InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa"/>
+               </View>
+               <View>
+                  <ButtonForm text="SIMPAN" onPress={() => { handleTambah() }} />
+               </View>
+            </View>
+         </DrawerBottom>
+      </>
+   )
+}

app/(application)/group/index.tsx

@@ -0,0 +1,85 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { SafeAreaView, ScrollView, View } from "react-native";
+
+export default function Index() {
+   const { active } = useLocalSearchParams<{ active?: string }>();
+
+   return (
+      <SafeAreaView>
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <View style={{ justifyContent: 'space-between', flexDirection: 'row', marginBottom: 15, backgroundColor: 'white', borderRadius: 20, padding: 5 }}>
+                  <ButtonTab
+                     active={active == "false" ? "false" : "true"}
+                     value="true"
+                     onPress={() => { router.push('/group?active=true') }}
+                     label="Aktif"
+                     icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
+                     n={2} />
+                  <ButtonTab
+                     active={active == "false" ? "false" : "true"}
+                     value="false"
+                     onPress={() => { router.push('/group?active=false') }}
+                     label="Tidak Aktif"
+                     icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
+                     n={2} />
+               </View>
+               <InputSearch />
+               <View>
+                  <BorderBottomItem
+                     borderType="all"
+                     icon={
+                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                           <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                        </View>
+                     }
+                     title="Adat"
+                  />
+                  <BorderBottomItem
+                     borderType="all"
+                     icon={
+                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                           <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                        </View>
+                     }
+                     title="Dinas"
+                  />
+                  <BorderBottomItem
+                     borderType="all"
+                     icon={
+                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                           <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                        </View>
+                     }
+                     title="PKK"
+                  />
+                  <BorderBottomItem
+                     borderType="all"
+                     icon={
+                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                           <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                        </View>
+                     }
+                     title="Karang Taruna"
+                  />
+                  <BorderBottomItem
+                     borderType="all"
+                     icon={
+                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                           <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                        </View>
+                     }
+                     title="Koperasi"
+                  />
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/notification.tsx

@@ -21,6 +21,7 @@ export default function Notification() {
                <View style={[Styles.wrapPaper, Styles.mb100]}>
                   <View style={[Styles.mb05]}>
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -31,6 +32,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -41,6 +43,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -51,6 +54,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -61,6 +65,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -71,6 +76,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -81,6 +87,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -91,6 +98,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />
@@ -101,6 +109,7 @@ export default function Notification() {
                         desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
                      />
                      <BorderBottomItem
+                        borderType="all"
                         icon={
                            <View style={[Styles.iconContent, ColorsStatus.primary]}>
                               <Feather name="bell" size={25} color="white" />

app/(application)/search.tsx

@@ -1,6 +1,7 @@
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import { InputForm } from "@/components/inputForm";
+import InputSearch from "@/components/inputSearch";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
@@ -20,16 +21,12 @@ export default function Search() {
             />
             <ScrollView>
                <View style={[Styles.p15]}>
-                  <InputForm
+                  <InputSearch />
-                     type="default"
-                     placeholder="Pencarian"
-                     round
-                     itemLeft={<Feather name="search" size={20} color="grey" />}
-                  />
                   <View style={[Styles.wrapPaper, Styles.mb100]}>
                      <View style={[Styles.mb30]}>
                         <Text>ANGGOTA</Text>
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={<Image
                               source={require("../../assets/images/user.jpeg")}
                               style={[Styles.userProfileSmall]}
@@ -38,6 +35,7 @@ export default function Search() {
                            subtitle="Dinas - Bendaraha"
                         />
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={<Image
                               source={require("../../assets/images/user.jpeg")}
                               style={[Styles.userProfileSmall]}
@@ -47,6 +45,7 @@ export default function Search() {
                         />
 
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={<Image
                               source={require("../../assets/images/user.jpeg")}
                               style={[Styles.userProfileSmall]}
@@ -59,6 +58,7 @@ export default function Search() {
                      <View style={[Styles.mb30]}>
                         <Text>DIVISI</Text>
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                  <MaterialIcons name="group" size={25} color="white" />
@@ -68,6 +68,7 @@ export default function Search() {
                            subtitle="Dinas"
                         />
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                  <MaterialIcons name="group" size={25} color="white" />
@@ -80,6 +81,7 @@ export default function Search() {
                      <View style={[Styles.mb05]}>
                         <Text>KEGIATAN</Text>
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                  <AntDesign name="areachart" size={25} color="white" />
@@ -89,6 +91,7 @@ export default function Search() {
                            subtitle="Dinas"
                         />
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                  <AntDesign name="areachart" size={25} color="white" />
@@ -98,6 +101,7 @@ export default function Search() {
                            subtitle="Dinas"
                         />
                         <BorderBottomItem
+                           borderType="bottom"
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
                                  <AntDesign name="areachart" size={25} color="white" />

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>
+   )
+}

constants/ColorsStatus.ts

@@ -13,5 +13,14 @@ export const ColorsStatus = {
    },
    error: {
       backgroundColor: '#DB1514'
+   },
+   orange: {
+      backgroundColor: 'orange'
+   },
+   white: {
+      backgroundColor: 'white'
+   },
+   lightGreen: {
+      backgroundColor: '#d2f0cb'
    }
 }

constants/Styles.ts

@@ -53,6 +53,9 @@ const Styles = StyleSheet.create({
    cWhite: {
       color: 'white'
    },
+   cBlack: {
+      color: 'black'
+   },
    cDefault: {
       color: '#19345E'
    },
@@ -92,6 +95,9 @@ const Styles = StyleSheet.create({
    mr10: {
       marginRight: 10
    },
+   ml05: {
+      marginLeft: 5
+   },
    ml10: {
       marginLeft: 10
    },
@@ -135,9 +141,21 @@ const Styles = StyleSheet.create({
       marginTop: 15,
       paddingVertical: 10
    },
+   btnTab: {
+      alignItems: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      borderRadius: 20,
+      flexDirection: 'row',
+      justifyContent: 'center'
+   },
+   btnMenuRow: {
+      width: '33%',
+      alignItems: 'center'
+   },
    inputRoundForm: {
       borderRadius: 10,
-      borderColor: '#19345E',
+      borderColor: 'gray',
       borderWidth: 1,
       paddingVertical: 10,
       paddingHorizontal: 15,
@@ -251,6 +269,14 @@ const Styles = StyleSheet.create({
       borderColor: '#d6d8f6',
       borderBottomWidth: 1,
    },
+   wrapItemBorderAll: {
+      padding: 10,
+      borderColor: '#d6d8f6',
+      borderWidth: 1,
+      borderRadius: 10,
+      marginBottom: 10
+   },
+
    userProfileSmall: {
       width: 48,
       height: 48,
@@ -271,7 +297,34 @@ const Styles = StyleSheet.create({
       alignItems: 'center',
       borderBottomLeftRadius: 25,
       borderBottomRightRadius: 25
-   }
+   },
+   modalBgTransparant: {
+      backgroundColor: 'rgba(0, 0, 0, 0.3)',
+      flex: 1
+   },
+   modalContent: {
+      width: '100%',
+      paddingBottom: 20,
+      backgroundColor: 'white',
+      borderTopRightRadius: 18,
+      borderTopLeftRadius: 18,
+      position: 'absolute',
+      bottom: 0,
+   },
+   titleContainer: {
+      backgroundColor: 'white',
+      borderTopRightRadius: 10,
+      borderTopLeftRadius: 10,
+      paddingHorizontal: 20,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 10
+   },
+   contentContainer: {
+      paddingHorizontal: 20,
+      height: '80%'
+   },
 })
 
 export default Styles;