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
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> |
|
); |
|
};
|
|
|