84 lines
1.9 KiB
JavaScript
84 lines
1.9 KiB
JavaScript
import { View, Text, FlatList, Pressable, StyleSheet} from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { useFonts } from 'expo-font';
|
|
|
|
const HomeCategory = ({selectCategory}) => {
|
|
useFonts({
|
|
'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf'),
|
|
'playFair': require('../../assets/fonts/PlayfairDisplay-Regular.ttf')
|
|
})
|
|
|
|
const [active, setActive] = useState(1);
|
|
const onCategoryClick = (id) => {
|
|
setActive(id);
|
|
}
|
|
//category
|
|
|
|
const category = [
|
|
{
|
|
id: 1,
|
|
name: 'Latest'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'World'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Business'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Politics'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Economy'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Tech'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'Lifestyle'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'Sports'
|
|
},
|
|
]
|
|
|
|
|
|
return (
|
|
<View style={{borderWidth: 2, borderColor: "#EEEDEB"}}>
|
|
<FlatList data={category} horizontal renderItem={({item}) => (
|
|
<Pressable onPress={() => {onCategoryClick(item.id); selectCategory(item.name)}}>
|
|
<View style={{backgroundColor: "#F5F7F8",borderWidth: 1 ,borderColor: "white"}}>
|
|
<Text style={item.id == active? styles.selectTopic : styles.notSelectTopic}>{item.name}</Text>
|
|
</View>
|
|
</Pressable>
|
|
)}/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles= StyleSheet.create({
|
|
notSelectTopic:{
|
|
marginRight: 10,
|
|
fontSize: 18,
|
|
padding: 10,
|
|
color: "#45474B",
|
|
fontFamily: 'playFair'
|
|
},
|
|
selectTopic:{
|
|
marginRight: 10,
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
padding: 10,
|
|
color: "black",
|
|
fontFamily: 'playFairBold'
|
|
}
|
|
})
|
|
|
|
export default HomeCategory
|