mirror of https://github.com/tooot-app/app
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import { uniqueId } from 'lodash'
|
|
import { Defs, LinearGradient, Path, Stop, Svg } from 'react-native-svg'
|
|
|
|
interface StarProps {
|
|
size: number
|
|
strokeLinejoin: 'miter' | 'round'
|
|
strokeLinecap: 'butt' | 'round'
|
|
offset: number
|
|
}
|
|
|
|
const NUM_POINT = 5
|
|
export const Star: React.FC<StarProps> = ({ size, strokeLinejoin, strokeLinecap, offset }) => {
|
|
const { colors } = useTheme()
|
|
|
|
const innerRadius = 25
|
|
const outerRadius = 50
|
|
|
|
const id = uniqueId()
|
|
|
|
const center = Math.max(innerRadius, outerRadius)
|
|
const angle = Math.PI / NUM_POINT
|
|
const points = []
|
|
|
|
for (let i = 0; i < NUM_POINT * 2; i++) {
|
|
let radius = i % 2 === 0 ? outerRadius : innerRadius
|
|
points.push(center + radius * Math.sin(i * angle))
|
|
points.push(center - radius * Math.cos(i * angle))
|
|
}
|
|
|
|
return (
|
|
<Svg width={size} height={size} viewBox={`0 0 100 100`}>
|
|
<Defs>
|
|
<LinearGradient id={id} x1='0' x2='100%' y1='0' y2='0'>
|
|
<Stop offset={`0%`} stopColor={colors.yellow} />
|
|
<Stop offset={`${offset}%`} stopColor={colors.yellow} />
|
|
<Stop offset={`${offset}%`} stopColor={colors.secondary} />
|
|
</LinearGradient>
|
|
</Defs>
|
|
<Path
|
|
d={`M${points.toString()}Z`}
|
|
fill={`url(#${id})`}
|
|
strokeLinejoin={strokeLinejoin}
|
|
strokeLinecap={strokeLinecap}
|
|
/>
|
|
</Svg>
|
|
)
|
|
}
|