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

upd: search

Browse Source 
Deskripsi:
- ui search

NoIssues
This commit is contained in:
amel
2025-02-26 17:58:31 +08:00
parent a25a0515c4
commit bb9c5090f9
5 changed files with 162 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,8 @@ export default function RootLayout() {
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="home" options={{ title: 'Home' }} />
<Stack.Screen name="feature" options={{ title: 'Fitur' }} />
<Stack.Screen name="search" options={{ title: 'Pencarian' }} />
</Stack>
<StatusBar style="light" />
</>

108
app/(application)/search.tsx Normal file
View File

@@ -0,0 +1,108 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { InputForm } from "@/components/inputForm";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function Search() {
return (
<>
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Pencarian',
headerTitleAlign: 'center'
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputForm
type="default"
placeholder="Pencarian"
round
itemLeft={<Feather name="search" size={20} color="grey" />}
/>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.mb30]}>
<Text>ANGGOTA</Text>
<BorderBottomItem
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>}
title="Amalia Dwi"
subtitle="Dinas - Bendaraha"
/>
<BorderBottomItem
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>}
title="Amalia Dwi"
subtitle="Dinas - Bendaraha"
/>
<BorderBottomItem
icon={<Image
source={require("../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>}
title="Amalia Dwi"
subtitle="Dinas - Bendaraha"
/>
</View>
<View style={[Styles.mb30]}>
<Text>DIVISI</Text>
<BorderBottomItem
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<MaterialIcons name="group" size={30} color="white" />
</View>
}
title="TU dan Umum"
subtitle="Dinas"
/>
<BorderBottomItem
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<MaterialIcons name="group" size={30} color="white" />
</View>
}
title="TU dan Umum"
subtitle="Dinas"
/>
</View>
<View style={[Styles.mb30]}>
<Text>KEGIATAN</Text>
<BorderBottomItem
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<AntDesign name="areachart" size={30} color="white" />
</View>
}
title="Kerja Bakti"
subtitle="Dinas"
/>
<BorderBottomItem
icon={
<View style={[Styles.iconContent, ColorsStatus.primary]}>
<AntDesign name="areachart" size={30} color="white" />
</View>
}
title="Pasar Ramadhan"
subtitle="Dinas"
/>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
</>
)
}

29
components/borderBottomItem.tsx Normal file
View File

@@ -0,0 +1,29 @@
import Styles from "@/constants/Styles";
import { Pressable, Text, View } from "react-native";
type Props = {
title: string
subtitle?: string
icon: React.ReactNode
desc?: string
onPress?: () => void
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress }: Props) {
return (
<Pressable style={[Styles.wrapItemBorderBottom]} onPress={onPress}>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween]}>
<View style={[Styles.ml10]}>
<Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
<Text style={[Styles.textMediumNormal]}>{subtitle}</Text>
</View>
<Text style={[Styles.textInformation]}>3 Feb 2025</Text>
</View>
</View>
{desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]}>{desc}</Text>}
</Pressable>
)
}

2
components/home/headerRightHome.tsx
View File

@@ -7,7 +7,7 @@ import Styles from "@/constants/Styles";
export function HeaderRightHome() {
return (
<View style={[Styles.rowSpaceBetween, { width: 140 }]}>
<ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/') }} />
<ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/search') }} />
<ButtonHeader item={<Feather name="bell" size={20} color="white" />} onPress={() => { router.push('/') }} />
<ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/') }} />
</View>

27
constants/Styles.ts
View File

@@ -8,11 +8,11 @@ const Styles = StyleSheet.create({
padding: 20,
},
textDefault: {
fontSize: 16,
fontSize: 15,
lineHeight: 24,
},
textDefaultSemiBold: {
fontSize: 16,
fontSize: 15,
lineHeight: 24,
fontWeight: '600',
},
@@ -80,17 +80,20 @@ const Styles = StyleSheet.create({
mt05: {
marginTop: 5
},
mr05:{
mr05: {
marginRight: 5
},
mr10: {
marginRight: 10
},
ml10: {
marginLeft: 10
},
ph15: {
paddingHorizontal: 15,
},
p15:{
padding:15
p15: {
padding: 15
},
round30: {
borderRadius: 30
@@ -236,6 +239,20 @@ const Styles = StyleSheet.create({
borderColor: '#d6d8f6',
borderWidth: 1,
marginBottom: 10
},
wrapItemBorderBottom: {
padding: 10,
borderColor: '#d6d8f6',
borderBottomWidth: 1,
},
userProfileSmall: {
width: 50,
height: 50,
borderRadius: 100
},
iconContent: {
padding: 10,
borderRadius: 100,
}
})