62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { IconContainerProps, Orientation, iconSize } from "./types";
|
|
|
|
function IconContainer({
|
|
children,
|
|
color,
|
|
size = "small",
|
|
isActive,
|
|
nestedComponent,
|
|
style,
|
|
}: IconContainerProps) {
|
|
const orientationStyle = {
|
|
[Orientation.BottomLeft]: {
|
|
bottom: `calc(-${iconSize[size]}/9)`,
|
|
left: `calc(-${iconSize[size]}/9)`,
|
|
},
|
|
[Orientation.BottomRight]: {
|
|
bottom: `calc(-${iconSize[size]}/9)`,
|
|
right: `calc(-${iconSize[size]}/9)`,
|
|
},
|
|
[Orientation.TopLeft]: {
|
|
top: `calc(-${iconSize[size]}/9)`,
|
|
left: `calc(-${iconSize[size]}/9)`,
|
|
},
|
|
[Orientation.TopRight]: {
|
|
top: `calc(-${iconSize[size]}/9)`,
|
|
right: `calc(-${iconSize[size]}/9)`,
|
|
},
|
|
};
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
zIndex: 10,
|
|
width: iconSize[size],
|
|
height: iconSize[size],
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
{nestedComponent?.node && (
|
|
<div
|
|
color={isActive ? color ?? undefined : undefined}
|
|
style={{
|
|
width: `calc(${iconSize[size]}/1.75)`,
|
|
height: `calc(${iconSize[size]}/1.75)`,
|
|
position: "absolute",
|
|
zIndex: 20,
|
|
background: nestedComponent?.options?.orientation ?? undefined,
|
|
...orientationStyle[
|
|
nestedComponent?.options?.orientation ?? Orientation.BottomRight
|
|
],
|
|
}}
|
|
>
|
|
{nestedComponent?.node ? nestedComponent.node : <></>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default IconContainer;
|