expo-popcore-app/app/searchResults.tsx

89 lines
2.6 KiB
TypeScript

import { useState } from 'react'
import {
View,
StyleSheet,
StatusBar as RNStatusBar,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter, useLocalSearchParams } from 'expo-router'
import SearchResultsGrid from '@/components/SearchResultsGrid'
import SearchBar from '@/components/SearchBar'
import type { TemplateGeneration } from '@/hooks'
const createMockResult = (id: string, height: number): TemplateGeneration & { height: number; title: string; image: any } => ({
id,
userId: 'test',
templateId: `template-${id}`,
type: 'VIDEO',
resultUrl: [],
status: 'completed',
createdAt: new Date(),
updatedAt: new Date(),
title: '猫咪圣诞写真',
image: require('@/assets/images/android-icon-background.png'),
height,
template: {
id: `template-${id}`,
title: '猫咪圣诞写真',
titleEn: 'Cat Christmas',
coverImageUrl: '',
},
})
const searchResults = [
createMockResult('1', 236),
createMockResult('2', 131),
createMockResult('3', 236),
createMockResult('4', 236),
createMockResult('5', 95),
createMockResult('6', 236),
createMockResult('7', 228),
createMockResult('8', 95),
createMockResult('9', 228),
]
export default function SearchResultsScreen() {
const router = useRouter()
const params = useLocalSearchParams()
const [searchText, setSearchText] = useState((params.q as string) || '')
return (
<SafeAreaView style={styles.container} edges={['top']}>
<StatusBar style="light" />
<RNStatusBar barStyle="light-content" />
<SearchBar
searchText={searchText}
onSearchTextChange={setSearchText}
onSearch={(text) => {}}
onBack={() => router.back()}
readOnly={true}
onInputPress={() => {
router.push({
pathname: '/searchTemplate',
params: { q: searchText, focus: 'true' },
})
}}
onClearPress={() => {
router.push({
pathname: '/searchTemplate',
params: { q: '', focus: 'true' },
})
}}
marginBottom={12}
/>
<SearchResultsGrid results={searchResults} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#090A0B',
},
})