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 | 102x 6652x 6652x 6652x 6652x 6652x 5x 5x 6652x 102x 20058x 6652x | import React from "react";
import { ICON_STATE } from "./richInput.types";
import { styled, useAppTheme } from "@theme/v2/Provider";
const IconWrapper = ({
icon: Icon,
onClick,
state = "default",
}: {
icon: React.ElementType;
onClick: (e: any) => void;
state?: ICON_STATE;
}) => {
const { palette } = useAppTheme();
const iconColors = {
default: palette.icon?.["icon-primary"],
active: palette.primitive?.blue[100],
disabled: palette.icon?.["icon-secondary"],
};
const isActive = state === "active";
const isDisabled = state === "disabled";
const handleClick = (e: any) => {
Iif (isDisabled) return;
onClick(e);
};
return (
<IconButton isActive={isActive} onClick={handleClick}>
<Icon fill={iconColors[state]} size={20} />
</IconButton>
);
};
export default IconWrapper;
interface IconButtonProps {
isActive?: boolean;
}
const IconButton = styled("button", {
shouldForwardProp: (prop) => prop !== "isActive",
})<IconButtonProps>(({ theme, isActive }) => {
return {
all: "unset",
backgroundColor: "transparent",
backgroundImage: isActive
? `${theme.palette.gradient["ocean-blue"]?.highlight}`
: "none",
padding: "4px",
height: "24px",
width: "24px",
borderRadius: "4px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0",
"&:hover": {
backgroundColor: theme.palette.primitive?.transparent["darken-5"],
},
};
});
|