33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { ApplyThemeProperty, useTheme } from '@/theme/ThemeContext';
|
|
import { CSSProperties, ReactNode, useState } from 'react';
|
|
|
|
export type DivProps = {
|
|
children?: ReactNode;
|
|
onClick?: () => void;
|
|
style?: CSSProperties;
|
|
_hover?: CSSProperties;
|
|
componentType?: ApplyThemeProperty['componentType'];
|
|
shape?: ApplyThemeProperty['shape'];
|
|
palette?: ApplyThemeProperty['palette'];
|
|
};
|
|
|
|
export const Div = ({ children, onClick, style, _hover, ...themeToApply }: DivProps) => {
|
|
const { applyTheme } = useTheme();
|
|
const [hover, setHover] = useState(false);
|
|
const hoverTheme = hover ? _hover : {};
|
|
const themedStyle = style ? applyTheme({ ...style, ...hoverTheme }, themeToApply) : undefined;
|
|
return (
|
|
<div
|
|
onMouseEnter={() => {
|
|
setHover(true);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setHover(false);
|
|
}}
|
|
onClick={onClick}
|
|
style={themedStyle}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}; |