1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import {type ReactNode} from 'react'
import {View} from 'react-native'
import {
atoms as a,
flatten,
type TextStyleProp,
useAlf,
useTheme,
type ViewStyleProp,
} from '#/alf'
import {normalizeTextStyles} from '#/alf/typography'
type SkeletonProps = {
blend?: boolean
}
export function Text({blend, style}: TextStyleProp & SkeletonProps) {
const {fonts, flags, theme: t} = useAlf()
const {width, ...flattened} = flatten(style)
const {lineHeight = 14, ...rest} = normalizeTextStyles(
[a.text_sm, a.leading_snug, flattened],
{
fontScale: fonts.scaleMultiplier,
fontFamily: fonts.family,
flags,
},
)
return (
<View
style={[a.flex_1, {maxWidth: width, paddingVertical: lineHeight * 0.15}]}>
<View
style={[
a.rounded_md,
t.atoms.bg_contrast_25,
{
height: lineHeight * 0.7,
opacity: blend ? 0.6 : 1,
},
rest,
]}
/>
</View>
)
}
export function Circle({
children,
size,
blend,
style,
}: ViewStyleProp & {children?: ReactNode; size: number} & SkeletonProps) {
const t = useTheme()
return (
<View
style={[
a.justify_center,
a.align_center,
a.rounded_full,
t.atoms.bg_contrast_25,
{
width: size,
height: size,
opacity: blend ? 0.6 : 1,
},
style,
]}>
{children}
</View>
)
}
export function Pill({
size,
blend,
style,
}: ViewStyleProp & {size: number} & SkeletonProps) {
const t = useTheme()
return (
<View
style={[
a.rounded_full,
t.atoms.bg_contrast_25,
{
width: size * 1.618,
height: size,
opacity: blend ? 0.6 : 1,
},
style,
]}
/>
)
}
export function Col({
children,
style,
}: ViewStyleProp & {children?: React.ReactNode}) {
return <View style={[a.flex_1, style]}>{children}</View>
}
export function Row({
children,
style,
}: ViewStyleProp & {children?: React.ReactNode}) {
return <View style={[a.flex_row, style]}>{children}</View>
}
|
