xref: /MusicFree/src/components/base/linkText.tsx (revision 095287552b9baf2f2ceeb9397c563c292a4f7934)
1import React, {useState} from 'react';
2import {StyleSheet, TextProps} from 'react-native';
3import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
4import openUrl from '@/utils/openUrl';
5import ThemeText from './themeText';
6import Color from 'color';
7
8type ILinkTextProps = TextProps & {
9    fontSize?: keyof typeof fontSizeConst;
10    fontWeight?: keyof typeof fontWeightConst;
11    linkTo?: string;
12};
13
14export default function LinkText(props: ILinkTextProps) {
15    const [isPressed, setIsPressed] = useState(false);
16
17    return (
18        <ThemeText
19            {...props}
20            style={[style.linkText, isPressed ? style.pressed : null]}
21            onPressIn={() => {
22                setIsPressed(true);
23            }}
24            onPress={() => {
25                props?.linkTo && openUrl(props.linkTo);
26            }}
27            onPressOut={() => {
28                setIsPressed(false);
29            }}>
30            {props.children}
31        </ThemeText>
32    );
33}
34
35const style = StyleSheet.create({
36    linkText: {
37        color: '#66ccff',
38        textDecorationLine: 'underline',
39    },
40    pressed: {
41        color: Color('#66ccff').alpha(0.4).toString(),
42    },
43});
44