feat: create avatar plugin component (#10)

Co-authored-by: Driss Chelouati <driss.chelouati@gmail.com> Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
shuriken-ui · Jul 23, 2023 · 3455fdb · 3455fdb
1 parent 6ec9bb8
commit 3455fdb
Show file tree

Hide file tree

Showing 3 changed files with 927 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -61,6 +61,234 @@ export default withShurikenUI({
   theme: {
     extend: {
       shurikenUi: {
+        avatar: {
+          avatarInner: {
+            size: 'full',
+            duration: '300',
+          },
+          avatarBadge: {
+            rounded: 'full',
+            bg: 'white',
+            bgDark: 'muted-800',
+            img: {
+              size: 'full',
+              rounded: 'full',
+            },
+          },
+          avatarImg: {
+            maxSize: 'full',
+            shadow: 'sm',
+            borderDark: 'transparent',
+          },
+          avatarText: {
+            font: 'sans',
+            fontSize: 'medium',
+          },
+          avatarDot: {
+            border: 'white',
+            borderDark: 'muted-800',
+            rounded: 'full',
+            primary: 'primary-500',
+            info: 'info-500',
+            success: 'success-500',
+            warning: 'warning-500',
+            danger: 'danger-500',
+            yellow: 'yellow-500',
+            pink: 'pink-500',
+            indigo: 'indigo-500',
+          },
+          avatarRing: {
+            ring: '2',
+            ringOffsetSize: '2',
+            ringOffsetColor: 'white',
+            ringOffsetColorDark: 'muted-800',
+            primary: 'primary-500',
+            info: 'info-500',
+            success: 'success-500',
+            warning: 'warning-500',
+            danger: 'danger-500',
+            yellow: 'yellow-500',
+            pink: 'pink-500',
+            indigo: 'indigo-500',
+          },
+          avatarXXS: {
+            size: '6',
+            badge: {
+              size: '3',
+              position: '1',
+            },
+            dot: {
+              size: '1.5',
+            },
+            text: 'xs',
+            roundedOrInnerDotPosition: '0',
+            curvedOrInner: {
+              rounded: 'md',
+              dotPosition: '0',
+            },
+            fullDotPosition: '0',
+          },
+          avatarXS: {
+            size: '8',
+            badge: {
+              size: '4',
+              position: '1',
+            },
+            dot: {
+              size: '2',
+            },
+            text: 'sm',
+            roundedOrInnerDotPosition: '0',
+            curvedOrInner: {
+              rounded: 'lg',
+              dotPosition: '0',
+            },
+            fullDotPosition: '0',
+          },
+          avatarSM: {
+            size: '10',
+            badge: {
+              size: '5',
+              position: '1',
+            },
+            dot: {
+              size: '2',
+            },
+            text: 'sm',
+            roundedOrInner: {
+              rounded: 'md',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: 'xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '0.5',
+          },
+          avatarMD: {
+            size: '12',
+            badge: {
+              size: '5',
+              position: '1',
+            },
+            dot: {
+              size: '3',
+            },
+            text: 'sm',
+            roundedOrInner: {
+              rounded: 'lg',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '2xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '0.5',
+          },
+          avatarLG: {
+            size: '16',
+            badge: {
+              size: '6',
+              position: '1',
+            },
+            dot: {
+              size: '3',
+            },
+            text: 'sm',
+            roundedOrInner: {
+              rounded: 'lg',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '2xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '1',
+          },
+          avatarXL: {
+            size: '20',
+            badge: {
+              size: '8',
+              position: '1',
+            },
+            dot: {
+              size: '4',
+            },
+            text: 'base',
+            roundedOrInner: {
+              rounded: 'xl',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '3xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '1',
+          },
+          avatar2XL: {
+            size: '24',
+            badge: {
+              size: '10',
+              position: '1.5',
+            },
+            dot: {
+              size: '4',
+            },
+            text: 'xl',
+            roundedOrInner: {
+              rounded: 'xl',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '3xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '1.5',
+          },
+          avatar3XL: {
+            size: '28',
+            badge: {
+              size: '10',
+              position: '1.5',
+            },
+            dot: {
+              size: '4',
+            },
+            text: '2xl',
+            roundedOrInner: {
+              rounded: 'xl',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '3xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '2',
+          },
+          avatar4XL: {
+            size: '32',
+            badge: {
+              size: '12',
+              position: '2',
+            },
+            dot: {
+              size: '4',
+            },
+            text: '3xl',
+            roundedOrInner: {
+              rounded: 'xl',
+              dotPosition: '0',
+            },
+            curvedOrInner: {
+              rounded: '3xl',
+              dotPosition: '0',
+            },
+            fullDotPosition: '2.5',
+          },
+          avatarFull: {
+            rounded: 'full',
+            avatarInnerRounded: 'full',
+            avatarBadgePosition: '0',
         checkbox: {
           outer: {
             size: '5',