xref: /MusicFree/src/components/base/linkText.tsx (revision a22fe20fec36f6663a9f0517917d68661349bfca)

import React, {useState} from 'react';
import {StyleSheet, TextProps} from 'react-native';
import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
import openUrl from '@/utils/openUrl';
import ThemeText from './themeText';
import Color from 'color';

type ILinkTextProps = TextProps & {
    fontSize?: keyof typeof fontSizeConst;
    fontWeight?: keyof typeof fontWeightConst;
    linkTo?: string;
};

export default function LinkText(props: ILinkTextProps) {
    const [isPressed, setIsPressed] = useState(false);

    return (
        <ThemeText
            {...props}
            style={[style.linkText, isPressed ? style.pressed : null]}
            onPressIn={() => {
                setIsPressed(true);
            }}
            onPress={() => {
                props?.linkTo && openUrl(props.linkTo);
            }}
            onPressOut={() => {
                setIsPressed(false);
            }}>
            {props.children}
        </ThemeText>
    );
}

const style = StyleSheet.create({
    linkText: {
        color: '#66ccff',
        textDecorationLine: 'underline',
    },
    pressed: {
        color: Color('#66ccff').alpha(0.4).toString(),
    },
});