robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {StyleSheet, type TextProps} from 'react-native'
2import {type PathProps, type SvgProps} from 'react-native-svg'
3import {Defs, LinearGradient, Stop} from 'react-native-svg'
4import {nanoid} from 'nanoid/non-secure'
5
6import {tokens, useTheme} from '#/alf'
7
8export type Props = {
9 fill?: PathProps['fill']
10 style?: TextProps['style']
11 size?: keyof typeof sizes
12 gradient?: keyof typeof tokens.gradients
13} & Omit<SvgProps, 'style' | 'size'>
14
15export const sizes = {
16 '2xs': 8,
17 xs: 12,
18 sm: 16,
19 md: 20,
20 lg: 24,
21 xl: 28,
22 '2xl': 32,
23 '3xl': 48,
24} as const
25
26export function useCommonSVGProps(props: Props) {
27 const t = useTheme()
28 const {fill, size, gradient, ...rest} = props
29 const style = StyleSheet.flatten(rest.style)
30 const _size = Number(size ? sizes[size] : rest.width || sizes.md)
31 let _fill = fill || style?.color || t.palette.primary_500
32 let gradientDef = null
33
34 if (gradient && tokens.gradients[gradient]) {
35 const id = gradient + '_' + nanoid()
36 const config = tokens.gradients[gradient]
37 _fill = `url(#${id})`
38 gradientDef = (
39 <Defs>
40 <LinearGradient
41 id={id}
42 x1="0"
43 y1="0"
44 x2="100%"
45 y2="0"
46 gradientTransform="rotate(45)">
47 {config.values.map(([stop, fill]) => (
48 <Stop key={stop} offset={stop} stopColor={fill} />
49 ))}
50 </LinearGradient>
51 </Defs>
52 )
53 }
54
55 return {
56 fill: _fill,
57 size: _size,
58 style,
59 gradient: gradientDef,
60 ...rest,
61 }
62}