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.
 
 
 
 
 

159 lines
4.7 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 }) {
const colorScheme = Appearance.getColorScheme();
const Blog = ({ blog }) => {
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,
minHeight: 70,
},
]}
>
<Text
style={[
tw("mb-2"),
{
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")}>
<Image
source={userImage}
style={[tw("rounded-full ml-1"), { width: 16, height: 16 }]}
/>
<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>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={12.051}
height={12.051}
// {...props}
>
<G
fill="none"
stroke="#818181"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={0.5}
data-name="vuesax/linear/message"
>
<Path d="M4.268 9.54h-.251c-2.013 0-3.013-.502-3.013-3.013v-2.51a2.663 2.663 0 0 1 3.013-3.013h4.017a2.663 2.663 0 0 1 3.013 3.013v2.51A2.663 2.663 0 0 1 8.034 9.54h-.252a.509.509 0 0 0-.4.2l-.753 1a.713.713 0 0 1-1.205 0l-.753-1a.568.568 0 0 0-.403-.2Z" />
<Path
data-name="Vector"
d="M8.032 5.523h0M6.024 5.523h0M4.015 5.523h0"
/>
</G>
</Svg>
</View>
</View>
</View>
</Pressable>
);
};
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} />}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const mapStateToProps = (state) => ({
// features: state.publicApi.home?.features,
mobile: state.publicApi.mobile,
});
export default connect(mapStateToProps, {})(Blogs);