Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import { IconButton as MUIIconButton } from "@mui/material"; import { Icon } from "../Icon"; import { contentTypes } from "../../shared/iconTypes/icons"; import { colors } from "../../theme/colors"; import React from "react"; interface IconButtonProps { icon: keyof typeof contentTypes; iconSize?: number; iconColor?: string; // Agregamos la propiedad iconColor onClick?: () => void; mode?: "primary" | "secondary" | "tertiary" | "quaternary"; disabled?: boolean; style?: React.CSSProperties; } export const IconButton = ({ icon, onClick, iconSize, iconColor, // La incluimos en las props mode = "primary", disabled = false, style = {}, }: IconButtonProps) => { const iconButtonStyleNoDisabled = { primary: { backgroundColor: colors.accent[500], color: "white", }, secondary: { backgroundColor: "transparent", color: colors.accent[500], border: `1px dashed ${colors.accent[500]}`, }, tertiary: { backgroundColor: "transparent", color: colors.accent[500], border: `1px solid ${colors.accent[500]}`, }, quaternary: { backgroundColor: "transparent", color: colors.accent[500], }, }; const iconButtonStyleDisabled = { primary: { backgroundColor: colors.neutral[400], color: "white", }, secondary: { backgroundColor: "transparent", color: colors.neutral[400], border: `1px dashed ${colors.neutral[400]}`, }, tertiary: { backgroundColor: "transparent", color: colors.neutral[400], border: `1px solid ${colors.neutral[400]}`, }, quaternary: { backgroundColor: "transparent", color: colors.neutral[400], }, }; const finalIconColor = iconColor ? iconColor : disabled ? iconButtonStyleDisabled[mode].color : iconButtonStyleNoDisabled[mode].color; return ( <MUIIconButton style={{ ...(disabled ? iconButtonStyleDisabled[mode] : iconButtonStyleNoDisabled[mode]), borderRadius: "10px", ...style, }} aria-label="iconButton" onClick={onClick} disabled={disabled} > <Icon name={icon} size={iconSize} color={finalIconColor} /> </MUIIconButton> ); }; |