56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { Progress } from 'native-base';
|
|
import { View, ViewStyle, StyleProp } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { scoreAtom } from './Play/PlayScore';
|
|
import { useAtom } from 'jotai';
|
|
|
|
export interface StarProgressProps {
|
|
max: number;
|
|
starSteps: number[];
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const StarProgress = (props: StarProgressProps) => {
|
|
const [score] = useAtom(scoreAtom);
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
position: 'relative',
|
|
maxWidth: 600,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
props.style,
|
|
]}
|
|
>
|
|
<Progress
|
|
color={'#6075F9'}
|
|
style={{
|
|
flex: 1,
|
|
}}
|
|
value={score}
|
|
max={props.max}
|
|
/>
|
|
{props.starSteps.map((step) => {
|
|
return (
|
|
<Ionicons
|
|
key={step}
|
|
name={step <= score ? 'star' : 'star-outline'}
|
|
color={step <= score ? '#EBDA3C' : '#6075F9'}
|
|
size={20}
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${(step / props.max) * 100}%`,
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default StarProgress;
|