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.
 
 
 
 
 

154 lines
4.2 KiB

import React from "react";
import {
View,
Image,
Text,
Dimensions,
TouchableOpacity,
FlatList,
Pressable,
Appearance,
Platform,
} from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
//components
import Header from "../components/Header";
//Style
import tw from "tailwind-rn";
import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize";
//asssets
import userImage from "../assets/user.png";
const { width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Blogs({ blogs, mobile, theme }) {
return (
<View style={[tw("flex")]}>
{blogs.length ? (
<>
<View style={tw("w-full px-4")}>
<Header title={"خواندنیها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3")]}
data={blogs.slice(0, 7)}
renderItem={({ item }) => (
<Blog blog={item} mobile={mobile} theme={theme} />
)}
keyExtractor={(item) => item.id}
initialNumToRender={5}
/>
</>
) : null}
</View>
);
}
const Blog = ({ blog, mobile, theme }) => {
const navigation = useNavigation();
return (
<Pressable
style={[tw("mr-4 relative"), { width: mobile ? 250 : width / 2.2 }]}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain"
style={[
{
flex: 1,
height: mobile ? 180 : ((width / 2.2) * 9) / 16,
},
]}
/>
<View
style={[
{ transform: [{ translateY: -40 }], marginHorizontal: 10 },
tw("flex justify-between bg-white rounded-md p-2"),
{
shadowColor: "#00000055",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
height: 85,
backgroundColor:
theme === "light" ? Colors.theme1.white : Colors.theme1.green79,
},
]}
>
<Text
style={[
tw("mb-1"),
{
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
textAlign: ios ? "right" : "auto",
},
]}
>
{blog.title}
</Text>
<View style={[tw("flex flex-row-reverse justify-between")]}>
<View style={tw("flex-row-reverse items-center")}>
<View style={{ height: 30 }}>
<Image
resizeMode="contain"
source={userImage}
style={[tw("rounded-full ml-1"), { width: 20, flex: 1 }]}
/>
</View>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
حامد دژبانی نسب
</Text>
</View>
<View style={tw("flex-row-reverse items-center")}>
<Text
style={[
tw("ml-1"),
{
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
۳۰ دقیقه
</Text>
</View>
</View>
</View>
</Pressable>
);
};
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
export default connect(mapStateToProps, {})(Blogs);