wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: ui group

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

No Issues
This commit is contained in:
amel
2025-02-27 17:37:44 +08:00
parent f7b8c08f20
commit a22719780b
14 changed files with 321 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/(application)/_layout.tsx
View File

@@ -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" />
</>

4
app/(application)/feature.tsx
View File

@@ -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={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" />
<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" onPress={() => { }} />
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" />

58
app/(application)/group/_layout.tsx Normal file
View File

@@ -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>
</>
)
}

85
app/(application)/group/index.tsx Normal file
View File

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

9
app/(application)/notification.tsx
View File

@@ -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" />

16
app/(application)/search.tsx
View File

@@ -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
type="default"
placeholder="Pencarian"
round
itemLeft={<Feather name="search" size={20} color="grey" />}
/>
<InputSearch />
<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" />