DS Boyce
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import {View} from 'react-native'
|
|
import {Trans} from '@lingui/react/macro'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, type ButtonProps} from '#/components/Button'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function EditTextButton({
|
|
children,
|
|
style,
|
|
onPress,
|
|
...props
|
|
}: ButtonProps & {value: string}) {
|
|
const t = useTheme()
|
|
|
|
return (
|
|
<View style={[a.relative]}>
|
|
<Button
|
|
color="secondary"
|
|
style={[
|
|
a.flex_1,
|
|
a.justify_between,
|
|
a.rounded_full,
|
|
a.border,
|
|
t.atoms.bg,
|
|
t.atoms.border_contrast_low,
|
|
style,
|
|
]}
|
|
onPress={onPress}
|
|
{...props}>
|
|
{context => (
|
|
<View
|
|
style={[
|
|
a.flex_1,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.justify_between,
|
|
a.px_md,
|
|
a.py_sm,
|
|
]}>
|
|
{typeof children === 'function' ? children(context) : children}
|
|
<View
|
|
style={[
|
|
a.ml_sm,
|
|
a.rounded_full,
|
|
t.atoms.bg_contrast_50,
|
|
{paddingHorizontal: 10, paddingVertical: 8},
|
|
]}>
|
|
<Text
|
|
style={[a.text_xs, a.font_medium, t.atoms.text_contrast_high]}>
|
|
<Trans>Edit</Trans>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</Button>
|
|
</View>
|
|
)
|
|
}
|