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