Files
cally/components/pages/todos/ProgressCard.tsx
2024-12-30 12:09:12 +01:00

54 lines
1.8 KiB
TypeScript

import { Text, View } from "react-native-ui-lib";
import React from "react";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
import { useAuthContext } from "@/contexts/AuthContext";
export const transformNumber = (value: number, progressLimit: number) => {
return Math.floor((value / progressLimit) * 100);
}
const PROGRESS_LIMIT = 1000;
const ProgressCard = ({children}: { children?: React.ReactNode }) => {
const { profileData } = useAuthContext();
const weeklyPoints = profileData?.weeklyPoints ?? 0;
const transformedWeeklyPoints = transformNumber(weeklyPoints, PROGRESS_LIMIT);
return (
<View
backgroundColor="white"
marginB-5
padding-15
style={{borderRadius: 22}}
>
<View row centerV>
<FireworksOrangeIcon/>
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
You have earned {weeklyPoints} points this week!{" "}
</Text>
</View>
<ProgressBar
progress={transformedWeeklyPoints}
progressColor="#ea156c"
style={{
height: 21,
backgroundColor: "#fcf2f6",
marginTop: 15,
marginBottom: 5,
}}
/>
<View row spread>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>{PROGRESS_LIMIT}</Text>
</View>
<View centerV centerH>
{children}
</View>
</View>
);
};
export default ProgressCard;