51 lines
864 B
TypeScript
51 lines
864 B
TypeScript
import React from "react";
|
|
import { View, StyleSheet } from "@react-pdf/renderer";
|
|
|
|
const styles = StyleSheet.create({
|
|
progressBar: {
|
|
borderRadius: 16,
|
|
overflow: "hidden",
|
|
},
|
|
progressBarPerc: {
|
|
height: "100%",
|
|
zIndex: 1,
|
|
},
|
|
});
|
|
|
|
interface Props {
|
|
width: number;
|
|
height: number;
|
|
backgroundColor: string;
|
|
progressColor: string;
|
|
percentage: number;
|
|
}
|
|
|
|
const ProgressBar = ({
|
|
width,
|
|
height,
|
|
backgroundColor,
|
|
progressColor,
|
|
percentage,
|
|
}: Props) => {
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
width,
|
|
height,
|
|
backgroundColor,
|
|
},
|
|
styles.progressBar,
|
|
]}
|
|
>
|
|
<View
|
|
style={[
|
|
{ width: `${percentage}%`, backgroundColor: progressColor },
|
|
styles.progressBarPerc,
|
|
]}
|
|
></View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar; |