Skip to content

Commit ff4bcc3

Browse files
codeAbinashcodeAbinash
committed
feat: integrate SearchableBackHeader component into multiple screens for improved navigation and search functionality
1 parent 4ccfa49 commit ff4bcc3

7 files changed

Lines changed: 81 additions & 72 deletions

File tree

‎src/components/SearchableBackHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@ export default function SearchableBackHeader({
7474
)
7575

7676
const icon = searching ? (
77-
<Cancel01Icon size={ICON_SIZE} color={iconColor} strokeWidth={2.2} />
77+
<Cancel01Icon size={ICON_SIZE} color={iconColor} strokeWidth={2.1} />
7878
) : (
79-
<Search01Icon size={ICON_SIZE} color={iconColor} strokeWidth={2.2} />
79+
<Search01Icon size={ICON_SIZE} color={iconColor} strokeWidth={2.1} />
8080
)
8181

8282
return (

‎src/screens/LocationNotes/LocationNote.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default function LocationNote({ navigation, route }: LocationNoteProps) {
7878
return (
7979
<>
8080
<SettWrapper title={name || 'Location Note'}>
81-
<Gap12 className='mt-3'>
81+
<Gap12>
8282
<SettGroup title='Location Name'>
8383
<Input
8484
Icon={<RoundIcon Icon={MapsLocation02Icon} />}

‎src/screens/LocationNotes/LocationNotes.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Gap12 } from '@components/Gap'
33
import Press from '@components/Press'
44
import RoundIcon from '@components/RoundIcon'
55
import Search from '@components/Search'
6+
import SearchableBackHeader from '@components/SearchableBackHeader'
67
import SettGroup from '@components/Settings/SettGroup'
78
import { SettOption } from '@components/Settings/SettOption'
89
import SettText from '@components/Settings/SettText'
@@ -49,16 +50,13 @@ export default function LocationNotes({ navigation }: NavProp) {
4950
<SettWrapper
5051
title='Location Notes'
5152
Header={
52-
<>
53-
<BackHeader title='Location Notes' navigation={navigation} />
54-
<View className='bg-white px-5 pb-4 dark:bg-zinc-950'>
55-
<Search
56-
placeholder='Search by title or description'
57-
value={search}
58-
onChangeText={(text) => setSearch(text)}
59-
/>
60-
</View>
61-
</>
53+
<SearchableBackHeader
54+
title='Location Notes'
55+
navigation={navigation}
56+
onChangeText={(text) => setSearch(text)}
57+
value={search}
58+
placeholder='Search notes...'
59+
/>
6260
}
6361
>
6462
<NoLocationNotes notes={searchResults} search={search} />
@@ -74,7 +72,7 @@ function NotesList({ notes, search }: { notes: LocationNote[]; search?: string }
7472
if (!notes || notes.length === 0) return null
7573
return (
7674
<Gap12>
77-
<SettText className='mt-3.5'>
75+
<SettText>
7876
{notes.length === 0
7977
? ''
8078
: `Found ${notes.length} note${notes.length > 1 ? 's' : ''}. Tap on a note to view details.`}

‎src/screens/Settings/Admin/Users/AllUsers.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import BackHeader from '@components/BackHeader'
21
import DoubleSkeleton from '@components/DoubleSkeleton'
32
import { Gap12 } from '@components/Gap'
43
import RoundIcon from '@components/RoundIcon'
5-
import Search from '@components/Search'
4+
import SearchableBackHeader from '@components/SearchableBackHeader'
65
import SettGroup from '@components/Settings/SettGroup'
76
import { SettOption } from '@components/Settings/SettOption'
87
import SettText from '@components/Settings/SettText'
@@ -14,7 +13,7 @@ import { F, Medium } from '@utils/fonts'
1413
import type { NavProp } from '@utils/types'
1514
import { delayedFadeAnimation, print } from '@utils/utils'
1615
import React, { useEffect } from 'react'
17-
import { ToastAndroid, View } from 'react-native'
16+
import { ToastAndroid } from 'react-native'
1817
import Animated from 'react-native-reanimated'
1918

2019
export default function AllUsers({ navigation }: NavProp) {
@@ -39,12 +38,13 @@ export default function AllUsers({ navigation }: NavProp) {
3938
return (
4039
<SettWrapper
4140
Header={
42-
<>
43-
<BackHeader title='All users' navigation={navigation} />
44-
<View className='bg-white px-5 pb-4 dark:bg-zinc-950'>
45-
<Search placeholder='Search user' value={search} onChangeText={(text) => setSearch(text)} />
46-
</View>
47-
</>
41+
<SearchableBackHeader
42+
title='All users'
43+
navigation={navigation}
44+
value={search}
45+
onChangeText={(text) => setSearch(text)}
46+
placeholder='Search user'
47+
/>
4848
}
4949
>
5050
<Gap12>

‎src/screens/Settings/UiAndComponents.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Input } from '@components/Input'
66
import Range from '@components/Range'
77
import RoundIcon from '@components/RoundIcon'
88
import Search from '@components/Search'
9+
import SearchableBackHeader from '@components/SearchableBackHeader'
910
import SettGroup from '@components/Settings/SettGroup'
1011
import { SettOption } from '@components/Settings/SettOption'
1112
import SettText from '@components/Settings/SettText'
@@ -43,7 +44,18 @@ export default function UiAndComponents({ navigation }: NavProp) {
4344
}, [option1])
4445

4546
return (
46-
<SettWrapper title='UI & Components'>
47+
<SettWrapper
48+
title='UI & Components'
49+
Header={
50+
<SearchableBackHeader
51+
title='UI & Components'
52+
navigation={navigation}
53+
onChangeText={(text) => setSearch(text)}
54+
value={search}
55+
placeholder='Search components...'
56+
/>
57+
}
58+
>
4759
<>
4860
<Gap12>
4961
<SettText>This is a test screen to show the different settings components</SettText>

‎src/screens/Test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function Test({ navigation }: NavProp) {
88
return (
99
<>
1010
<SettWrapper title='Test Screen'>
11-
<SettText className='mt-5'>This is a test screen</SettText>
11+
<SettText>This is a test screen</SettText>
1212
<SettGroup title='Normal Input'>
1313
<Input placeholder='Test Input' />
1414
</SettGroup>

‎src/screens/Try/TyrItOut.tsx‎

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import KeyboardAvoid from '@components/KeyboardAvoid'
33
import RoundIcon, { type GradientName } from '@components/RoundIcon'
44
import { PaddingTop } from '@components/SafePadding'
55
import Search from '@components/Search'
6+
import SearchableBackHeader from '@components/SearchableBackHeader'
67
import SettGroup from '@components/Settings/SettGroup'
78
import { SettOption } from '@components/Settings/SettOption'
89
import SettText from '@components/Settings/SettText'
10+
import SettWrapper from '@components/Settings/SettWrapper'
911
import ArtificialIntelligence04Icon from '@hugeicons/ArtificialIntelligence04Icon'
1012
import Calendar03Icon from '@hugeicons/Calendar03Icon'
1113
import ColorsIcon from '@hugeicons/ColorsIcon'
@@ -105,53 +107,50 @@ export default function TyrItOut({ navigation }: NavProp) {
105107
const searchedTools = useMemo(() => searchTools(search), [search])
106108

107109
return (
108-
<>
109-
<PaddingTop />
110-
<View className='px-5 pb-3'>
111-
<View className='my-1 flex-row items-center justify-between'>
112-
<Bold className='mb-1 mt-2 text-xl text-gray-800 dark:text-gray-200'>Try it out</Bold>
113-
<TouchableOpacity
114-
activeOpacity={0.6}
115-
className='p-2.5 pb-3.5 pr-0.5 pt-2'
116-
onPress={() => navigation.navigate('Settings')}
117-
>
118-
<ListSettingIcon size={23} color={theme === 'dark' ? Colors.zinc['300'] : Colors.zinc['700']} />
119-
</TouchableOpacity>
120-
</View>
121-
<Search placeholder='Search tools' value={search} onChangeText={setSearch} />
122-
</View>
123-
<KeyboardAvoid className='flex-1 bg-zinc-100 pt-4 dark:bg-black' contentContainerStyle={{ paddingBottom: 50 }}>
124-
<Gap20>
125-
{searchedTools.map((group, index) => (
126-
<Gap12 key={index}>
127-
{group.startText && <SettText>{group.startText}</SettText>}
128-
<SettGroup title={group.title}>
129-
{group.tools.map((tool, i) => (
130-
<Animated.View
131-
key={i}
132-
entering={delayedFadeAnimationSearch(search, i)}
133-
exiting={exiting}
134-
layout={layout}
135-
>
136-
<SettOption
137-
title={tool.title}
138-
Icon={<RoundIcon Icon={tool.Icon} gradient={tool.gradient} className={tool.className} />}
139-
arrow={tool.arrow ?? true}
140-
// Update onPress handlers to correctly navigate using the 'to' property
141-
onPress={() => tool.to && navigation.navigate(tool.to as any)}
142-
/>
143-
</Animated.View>
144-
))}
145-
</SettGroup>
146-
{group.endText && <SettText>{group.endText}</SettText>}
147-
</Gap12>
148-
))}
149-
{searchedTools.length === 0 && (
150-
<SettText className='text-center'>No tools found. Try searching for something else.</SettText>
151-
)}
152-
</Gap20>
153-
</KeyboardAvoid>
154-
</>
110+
<SettWrapper
111+
title='Try it out'
112+
Header={
113+
<SearchableBackHeader
114+
title='Try it out'
115+
navigation={navigation}
116+
onChangeText={(text) => setSearch(text)}
117+
value={search}
118+
placeholder='Search tools'
119+
/>
120+
}
121+
>
122+
{/* <KeyboardAvoid className='flex-1 bg-zinc-100 dark:bg-black' contentContainerStyle={{ paddingBottom: 50 }}> */}
123+
<Gap20>
124+
{searchedTools.map((group, index) => (
125+
<Gap12 key={index}>
126+
{group.startText && <SettText>{group.startText}</SettText>}
127+
<SettGroup title={group.title}>
128+
{group.tools.map((tool, i) => (
129+
<Animated.View
130+
key={i}
131+
entering={delayedFadeAnimationSearch(search, i)}
132+
exiting={exiting}
133+
layout={layout}
134+
>
135+
<SettOption
136+
title={tool.title}
137+
Icon={<RoundIcon Icon={tool.Icon} gradient={tool.gradient} className={tool.className} />}
138+
arrow={tool.arrow ?? true}
139+
// Update onPress handlers to correctly navigate using the 'to' property
140+
onPress={() => tool.to && navigation.navigate(tool.to as any)}
141+
/>
142+
</Animated.View>
143+
))}
144+
</SettGroup>
145+
{group.endText && <SettText>{group.endText}</SettText>}
146+
</Gap12>
147+
))}
148+
{searchedTools.length === 0 && (
149+
<SettText className='text-center'>No tools found. Try searching for something else.</SettText>
150+
)}
151+
</Gap20>
152+
{/* </KeyboardAvoid> */}
153+
</SettWrapper>
155154
)
156155
}
157156

0 commit comments

Comments
 (0)