pa-react-themes/components/Button.jsx

React Native Themes

import { Pressable as RNComponent } from "react-native"
import Text from "./Text.jsx";
import { DeviceMode } from "../helpers/deviceMode.js"

import { getThemeTailwind } from "../helpers/theme.js"
import { useThemeStore } from '../store/themeStore.js';

const COMPONENT_NAME = 'Button'

export default function Button({children, type, tailwind, tailwindText, big, normal, small, ...restOfProps}) {
    const mode = DeviceMode()
    //const theme = ThemeData()
    const theme = useThemeStore((state) => state.themeData)

    //console.log(theme)  

    //const h1 = big
    //const sm = small
    //const h3 = normal || !(big || sm) ? true : undefined
    
    //const theme = ThemeData()
    //console.log("TYPE:", COMPONENT_NAME, type)
    let typeFinal = getThemeTailwind(theme, COMPONENT_NAME, type)
    let typeFinalText = getThemeTailwind(theme, COMPONENT_NAME, type, 'text')
    
    //console.log("BUTTON:", type, typeFinal, typeFinalText) 


    //${mode == 'dark' ? theme.Button.darkBgColor : theme.Button.lightBgColor}
    //${bgColor ? bgColor : bgColorDark && mode == 'dark' ? bgColorDark : bgColorLight && mode != 'dark' ? bgColorLight : ''}

    //${getThemeTailwind(theme, COMPONENT_NAME, 'default')}
    /*${!(big || normal || small) && getThemeTailwind(theme, COMPONENT_NAME, 'normal')}
                
                ${typeFinal && typeFinal}

                ${big && getThemeTailwind(theme, COMPONENT_NAME, 'big')}
                ${normal && getThemeTailwind(theme, COMPONENT_NAME, 'normal')}
                ${small && getThemeTailwind(theme, COMPONENT_NAME, 'small')}*/
    //underlayColor={`${mode == 'dark' ? getThemeTailwind(theme, COMPONENT_NAME, 'hoverDarkColor') : getThemeTailwind(theme, COMPONENT_NAME, 'hoverLightColor')}`}
    return ( 
        <RNComponent {...restOfProps}
            className={`                
                ${typeFinal && typeFinal}

                ${tailwind && tailwind}
                `}
                
        >
            {/*<Text color={color} colorDark={colorDark ? colorDark : theme.Button.darkColor} colorLight={colorLight ? colorLight : theme.Button.lightColor} tailwind={tailwindText} h1={h1} h3={h3} sm={sm}>*/}
            <Text
                tailwind={`${typeFinalText && typeFinalText} ${tailwindText}`} 
            >
                {children}
            </Text>
        </RNComponent>
    )
}