All files / src/components/NeumorphismPannel index.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ReactNode } from 'react';
import { styled } from '@mui/material/styles';
import Grid, { GridProps } from '@mui/material/Grid';
import { Theme, getNeumorphismByThemeMode, NeumorphismType, NeumorphismColorMode, NeumorphismParams } from '@/theme';

interface NeumorphismWrapperProps {
  theme?: Theme;
  thememode?: NeumorphismColorMode;
  type: NeumorphismType;
  shadowdistance?: string;
  shadowblur?: string;
  borderradiusval?: number;
}
const NeumorphismWrapper = styled(Grid)(
  ({
    theme,
    thememode,
    type,
    shadowdistance,
    shadowblur,
    borderradiusval
  }: NeumorphismWrapperProps) => {
    const neumorphismParams = {
      shadowDistance: shadowdistance,
      shadowBlur: shadowblur,
      borderRadiusVal: borderradiusval
    };
    const neuObj = getNeumorphismByThemeMode({ theme: theme!, neumorphismParams, mode: thememode });
    return {
      ...neuObj[type]
    };
  }
);

export interface INeumorphismPannelProps extends GridProps, NeumorphismParams {
  colorMode?: NeumorphismColorMode;
  type?: NeumorphismType;
  children?: ReactNode;
}
export default function NeumorphismPannel({
  colorMode,
  type = 'flat',
  shadowDistance,
  shadowBlur,
  borderRadiusVal,
  children,
  ...props
}: INeumorphismPannelProps) {
  return (
    <NeumorphismWrapper
      thememode={colorMode}
      type={type}
      shadowdistance={shadowDistance}
      shadowblur={shadowBlur}
      borderradiusval={borderRadiusVal}
      {...props}
    >
      {children}
    </NeumorphismWrapper>
  );
}