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.
 
 
 
 
 

146 lines
4.6 KiB

import React from "react";
import {
Pressable,
View,
Text,
Dimensions,
Image,
Platform,
} from "react-native";
import { connect } from "react-redux";
import { LinearGradient } from "expo-linear-gradient";
import { useNavigation } from "@react-navigation/native";
//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";
export const Single = ({ blog, theme }) => {
const navigation = useNavigation();
return (
<Pressable
style={tw("flex ")}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<View
style={[
tw("w-full rounded-sm overflow-hidden relative"),
{
height: ((width - 32) * 3) / 4.5,
},
]}
>
<Image
resizeMode="contain"
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
style={[tw("absolute left-0 top-0 w-full h-full ml-2")]}
/>
<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 absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"
)}
>
<View style={tw("w-full flex flex-row-reverse justify-between")}>
<View style={tw("flex flex-row-reverse")}>
<View
style={[
{ width: 50, height: 50, backgroundColor: "#aaa" },
tw("rounded-full ml-1"),
]}
></View>
<View style="flex py-2 justify-center">
<Text
style={[
tw("text-gray-100"),
{
fontFamily: "bold",
fontSize: fontSize.tiny,
textAlign: ios ? "right" : "auto",
},
]}
>
{"نوشته از:" + " " + "کامران ایزدی"}
</Text>
<Text
style={[
tw("text-gray-100 mt-2"),
{
fontFamily: "bold",
fontSize: fontSize.sm,
textAlign: ios ? "right" : "auto",
},
]}
>
{"سردبیر بخش وبلاگ دانوین"}
</Text>
</View>
</View>
<View style={tw("flex justify-center items-start")}>
<Text
style={[
tw("text-gray-100"),
{ fontFamily: "bold", fontSize: fontSize.sm },
]}
>
{"زمان مطالعه" + " " + "۳۰ دقیقه"}
</Text>
<Text
style={[
tw("mt-2 text-gray-100"),
{ fontFamily: "bold", fontSize: fontSize.sm },
]}
>
{"1400/11/24"}
</Text>
</View>
</View>
</LinearGradient>
</View>
<View style={tw("flex justify-between")}>
<View style={tw("flex mt-3")}>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.lg,
color: Colors.theme1.gray20,
textAlign: ios ? "right" : "auto",
}}
>
{blog?.title}
</Text>
<Text
style={{
fontFamily: "regular",
fontSize: fontSize.sm,
color: Colors.theme1.gray2077,
lineHeight: 25,
marginTop: 10,
textAlign: ios ? "right" : "auto",
}}
>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دست اندازی میکند پس
میزند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد
بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن
بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان{" "}
</Text>
</View>
</View>
</Pressable>
);
};
const mapStateToProps = (state) => ({
blog: state.blog.list[0],
theme: state.publicApi.theme
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Single);