You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

111 lines
2.5 KiB

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);