add patreon and supporters button

This commit is contained in:
MathieuG-P
2022-09-06 22:03:55 +02:00
parent a866532e46
commit 6b0b7715a2
7 changed files with 59 additions and 8 deletions
@@ -11,6 +11,7 @@ type propsType = {
className?: string,
style?: React.CSSProperties,
imgClassName?: string,
iconClassName?: string,
icon?: BsmIconType,
image?: string,
text?: string,
@@ -20,10 +21,11 @@ type propsType = {
disabled?: boolean,
onClickOutside?: (e: MouseEvent) => void,
onClick?: (e: React.MouseEvent) => void,
typeColor?:BsmButtonType
typeColor?:BsmButtonType,
color?: string
}
export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor}: propsType) {
export function BsmButton({className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color}: propsType) {
const t = useTranslation();
const secondColor = useThemeColor("second-color");
@@ -52,9 +54,9 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
return (
<OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
<div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${!withBar && !!typeColor && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...(!!primaryColor && {backgroundColor: primaryColor})}}>
<div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group ${!withBar && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, ...((!!primaryColor || !!color) && {backgroundColor: primaryColor ?? color})}}>
{ image && <BsmImage image={image} className={imgClassName}/> }
{ icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
{ icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"}/> }
{text && (type === "submit" ? <button className="w-full h-full" style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: textColor})}} >{t(text)}</span>)}
{ withBar && (
<div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>