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.
 
 
 
 
 

102 lines
2.6 KiB

import React from "react";
import { View, Text, Dimensions, Appearance } from "react-native";
import { Rating } from 'react-native-ratings';
//assets
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const width = Dimensions.get("window").width;
export default function Rates({ rate }) {
const ratingCompleted = (rating) => {
return;
}
return (
<View style={tw("flex flex-row-reverse")}>
<View style={[tw("flex items-center justify-center"), { width: "25%" }]}>
<Text
style={[
{ fontSize: fontSize.xl6, color: "#05335F", fontFamily: "bold" },
]}
>
{rate}
</Text>
<Rating
type='star'
ratingCount={5}
imageSize={15}
onFinishRating={(rating) => ratingCompleted(rating)}
/>
<Text
style={{
fontSize: fontSize.sm,
color: "#707070",
fontFamily: "light",
marginTop : 5
}}
>
{`از بین ${1150} نفر`}
</Text>
</View>
<View style={[tw("flex flex-1"), { width: "60%" }]}>
{[
{ name: "بخش ۱", value: 40 },
{ name: "بخش ۱", value: 20 },
{ name: "بخش ۱", value: 70 },
{ name: "بخش ۱", value: 10 },
{ name: "بخش ۱", value: 50 },
].map((field, index) => (
<Progress key={index} data={field} />
))}
</View>
</View>
);
}
const Progress = ({ data, ...props }) => {
const colorScheme = React.useMemo(() => {
return Appearance.getColorScheme();
},[props.useless]);
return (
<View style={[tw("flex flex-1 flex-row items-center py-1.5")]}>
<Text
style={{
fontSize: fontSize.sm,
color: "#05335F",
fontFamily: "regular",
}}
>
{data.name}
</Text>
<View
style={[
tw("rounded-md ml-2 flex-1"),
{ height: 6, backgroundColor: Colors.theme1[colorScheme].greenFF1 },
]}
>
<View
style={[
tw("h-full rounded-md"),
{ width: data.value + "%", backgroundColor: Colors.theme1[colorScheme].greenCF },
]}
></View>
</View>
<Text
style={{
fontSize: fontSize.xs,
fontFamily: "light",
width: width / 7.5,
textAlign: "center",
color: "#05335F",
}}
>
{data.value + "%"}
</Text>
</View>
);
};