Reza_ashrafi
3 years ago
parent
5c61fe6ff9
commit
b99e054b74
9 changed files with 218 additions and 43 deletions
@ -0,0 +1,111 @@ |
||||
import { |
||||
View, |
||||
Text, |
||||
Platform, |
||||
StyleSheet, |
||||
SafeAreaView, |
||||
StatusBar, |
||||
Dimensions, |
||||
FlatList, |
||||
Pressable, |
||||
Image, |
||||
} from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
import React from "react"; |
||||
import { useNavigation } from "@react-navigation/native"; |
||||
|
||||
//components
|
||||
import Navbar from "../../../components/Navbar"; |
||||
|
||||
//style
|
||||
import fontSize from "../../../constants/fontSize"; |
||||
import tw from "tailwind-rn"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
//variables
|
||||
const ios = Platform.OS === "ios"; |
||||
const { width, height } = Dimensions.get("window"); |
||||
|
||||
const MoreBlog = ({ mobile, theme, blogs }) => { |
||||
const styles = React.useMemo(() => { |
||||
return StyleSheet.create({ |
||||
contentContainerStyle: { |
||||
paddingBottom: 100, |
||||
}, |
||||
container: { |
||||
flexDirection: "column", |
||||
paddingVertical: 5, |
||||
paddingHorizontal: 16, |
||||
}, |
||||
}); |
||||
}, [theme]); |
||||
|
||||
return ( |
||||
<SafeAreaView |
||||
style={{ |
||||
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
||||
position: "relative", |
||||
}} |
||||
> |
||||
<Navbar |
||||
headerOptions={{ |
||||
logo: false, |
||||
menu: false, |
||||
hamburgerMenu: false, |
||||
title: null, |
||||
bookmark: false, |
||||
qr: false, |
||||
back: true, |
||||
}} |
||||
/> |
||||
<FlatList |
||||
data={blogs} |
||||
style={tw("px-4")} |
||||
renderItem={({ item }) => <Blog blog={item} theme={theme} />} |
||||
keyExtractor={(item) => item.id} |
||||
contentContainerStyle={{ paddingBottom: height / 2 }} |
||||
/> |
||||
</SafeAreaView> |
||||
); |
||||
}; |
||||
|
||||
const Blog = ({ blog, theme }) => { |
||||
const navigation = useNavigation(); |
||||
return ( |
||||
<Pressable |
||||
style={[tw("w-full flex pb-4 mb-4")]} |
||||
onPress={() => navigation.push("Blog", { id: blog?.id })} |
||||
> |
||||
<Image |
||||
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }} |
||||
resizeMode="contain" |
||||
style={[ |
||||
tw("rounded-sm"), |
||||
{ width: "100%", height: ((width - 32) * 3) / 4 }, |
||||
]} |
||||
/> |
||||
<Text |
||||
style={{ |
||||
fontSize: fontSize.lg, |
||||
fontFamily: "bold", |
||||
color: |
||||
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9, |
||||
marginTop: 5, |
||||
textAlign: ios ? "right" : "auto", |
||||
}} |
||||
> |
||||
{blog?.title} |
||||
</Text> |
||||
</Pressable> |
||||
); |
||||
}; |
||||
|
||||
// `w-[${state + '%'}]`
|
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
mobile: state.publicApi.mobile, |
||||
theme: state.publicApi.theme, |
||||
blogs: state.blog.list, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(MoreBlog); |
||||
Loading…
Reference in new issue