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.
 
 
 
 
 

190 lines
5.5 KiB

import React from "react";
import {
View,
Text,
Dimensions,
Pressable,
Image,
Appearance,
Platform,
} from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { LinearGradient } from "expo-linear-gradient";
import moment from "jalali-moment";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const { width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
const Target = ({ blogs, theme }) => {
const navigation = useNavigation();
const Large = ({ blog }) => {
return (
<Pressable
style={tw("flex w-full")}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<View
className="relative w-full rounded-md overflow-hidden"
style={{ height: ((width - 32) / 4) * 2.8 }}
>
<Image
resizeMode="contain"
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
style={tw("w-full h-full absolute left-0 top-0 rounded-sm")}
/>
<LinearGradient
colors={["transparent", "rgba(0,0,0,0.8)"]}
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.1 }}
style={tw(
"flex justify-end rounded-md absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"
)}
></LinearGradient>
</View>
<Text
style={[
tw("my-3"),
{
fontFamily: "bold",
fontSize: fontSize.lg,
textAlign: ios ? "right" : "auto",
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
},
]}
>
{blog?.title}
</Text>
<View style={tw("w-full flex flex-row-reverse justify-between")}>
<View style={tw("flex flex-row-reverse")}>
<View
style={[
{ width: 40, height: 40, backgroundColor: "#ddd" },
tw("rounded-full ml-1"),
]}
></View>
<View
style={tw(`flex py-2 justify-center ${ios ? "items-end" : ""}`)}
>
{/* <Text
style={[
{
fontFamily: "bold",
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
fontSize: fontSize.tiny,
},
]}
>
{"نوشته از:" + " " + "کامران ایزدی"}
</Text> */}
<Text
style={[
{
fontFamily: "regular",
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
fontSize: fontSize.xs,
},
]}
>
{"سردبیر بخش وبلاگ دانوین"}
</Text>
</View>
</View>
<View style={tw("flex justify-center items-start")}>
{blog?.duration ? (
<Text
style={[
{
fontFamily: "bold",
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
fontSize: fontSize.sm,
},
]}
>
{"زمان مطالعه" + " " + blog?.duration + " دقیقه"}
</Text>
) : null}
<Text
style={{
fontFamily: "regular",
color: Colors.theme1.white,
fontSize: fontSize.sm,
textAlign: ios ? "left" : "left",
}}
>
{moment(blog?.createdAt).format("jYYYY/jMM/jDD")}
</Text>
</View>
</View>
</Pressable>
);
};
const Small = ({ blog }) => {
return (
<Pressable
style={[tw("flex "), { width: "48%" }]}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<Image
resizeMode="contain"
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
style={[
tw("w-full rounded-sm"),
{ height: ((((width - 32) * 48) / 100) * 3) / 4.4 },
]}
/>
<View style={tw("flex justify-center")}>
<Text
style={[
tw("my-2"),
{
fontFamily: "bold",
fontSize: fontSize.sm,
textAlign: ios ? "right" : "auto",
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
},
]}
>
{blog?.title}
</Text>
</View>
</Pressable>
);
};
return (
<View style={tw("flex ")}>
<Large blog={blogs[0]} />
<View style={tw("flex flex-row justify-between mt-4")}>
{blogs?.slice(1, 3).map((blog, index) => (
<Small blog={blog} key={index} />
))}
</View>
</View>
);
};
const mapStateToProps = (state) => ({
theme: state.publicApi.theme,
});
export default connect(mapStateToProps)(Target);