143 lines
3.8 KiB

import React from "react";
import {
View,
Image,
Text,
Dimensions,
TouchableOpacity,
FlatList,
Pressable,
Appearance,
Platform,
} from "react-native";
import { connect } from "react-redux";
import Svg, { G, Path } from "react-native-svg";
//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 }) {
return (
<View style={[tw("flex flex-col pr-3 mb-5")]}>
<View style={tw("w-full pl-3")}>
<Header title={"خواندنیها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-7")]}
data={blogs}
renderItem={({ item }) => <Blog blog={item} mobile={mobile} />}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const Blog = ({ blog, mobile }) => {
const colorScheme = Appearance.getColorScheme();
return (
<Pressable
style={[
tw("rounded-md ml-3 rounded-md relative"),
{ width: mobile ? 250 : width / 2.2 },
]}
// onPress={() => navigation.navigate('Product')}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain"
style={[
tw("rounded-md"),
{
flex: 1,
height: mobile ? 180 : ((width / 2.2) * 9) / 16,
},
]}
/>
<View
style={[
{ transform: [{ translateY: -40 }], marginHorizontal: 10 },
tw("flex flex-col justify-between bg-white rounded-md p-2"),
{
shadowColor: "#00000055",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
height: 85,
},
]}
>
<Text
style={[
tw("mb-1"),
{
color: Colors.theme1[colorScheme].gray20,
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: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
حامد دژبانی نسب
</Text>
</View>
<View style={tw("flex-row-reverse items-center")}>
<Text
style={[
tw("ml-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
۳۰ دقیقه
</Text>
</View>
</View>
</View>
</Pressable>
);
};
const mapStateToProps = (state) => ({
// features: state.publicApi.home?.features,
mobile: state.publicApi.mobile,
});
export default connect(mapStateToProps, {})(Blogs);