First Commit

2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1,93 @@
+// @project
+import { AvatarSize } from '@/enum';
+
+// @assets
+import { IconUser } from '@tabler/icons-react';
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+/***************************  AVATAR - SIZE  ***************************/
+
+const badgeSX = { border: '2px solid', borderRadius: '50%' };
+
+const avatarSizes = (theme) => ({
+  [AvatarSize.BADGE]: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: 400,
+    width: 20,
+    height: 20,
+    '& ~ span.MuiBadge-dot': { ...badgeSX, borderWidth: 1 },
+    '& svg': { width: 14, height: 14 }
+  },
+  [AvatarSize.XS]: {
+    ...theme.typography.caption,
+    width: 32,
+    height: 32,
+    '& ~ span.MuiBadge-dot': { width: 10, height: 10, ...badgeSX },
+    '& svg': { width: 16, height: 16 }
+  },
+  [AvatarSize.SM]: {
+    ...theme.typography.caption,
+    width: 40,
+    height: 40,
+    '& ~ span.MuiBadge-dot': { width: 12, height: 12, ...badgeSX },
+    '& svg': { width: 16, height: 16 }
+  }
+});
+
+/***************************  OVERRIDES - AVATAR  ***************************/
+
+export default function Avatar(theme) {
+  const sizeVariants = (theme) => {
+    const styles = avatarSizes(theme);
+
+    return Object.values(AvatarSize).map((size) => ({
+      props: { size },
+      style: styles[size]
+    }));
+  };
+
+  const colorVariants = colors.map((color) => {
+    const paletteColor = theme.vars.palette[color];
+
+    return {
+      props: { color },
+      style: {
+        color: paletteColor.main,
+        backgroundColor: paletteColor.light
+      }
+    };
+  });
+
+  return {
+    MuiAvatar: {
+      defaultProps: {
+        children: <IconUser />,
+        color: 'primary',
+        size: AvatarSize.SM
+      },
+      styleOverrides: {
+        root: {
+          variants: [
+            {
+              props: { color: 'default' },
+              style: {
+                color: theme.vars.palette.primary.darker,
+                backgroundColor: theme.vars.palette.primary.lighter
+              }
+            },
+            ...colorVariants,
+            ...sizeVariants(theme),
+            {
+              props: { variant: 'rounded' },
+              style: {
+                borderRadius: 8
+              }
+            }
+          ]
+        }
+      }
+    }
+  };
+}