import {
Avatar,
AvatarGroup,
createStyles,
IAvatarSize,
IAvatarTypes,
IBadgeTypes,
ICounterTypes,
IIndicatorTypes,
IStatusTypes,
Typography,
useStyles,
View,
} from '@lad-tech/mobydick-core';
export const AvatarWidget = () => {
const [styles] = useStyles(stylesFn);
return (
<View>
<View style={styles.container}>
<Typography>{'Content'}</Typography>
<View style={styles.row}>
<Avatar user={userTest} />
<Avatar user={userTest} type={IAvatarTypes.icon} />
</View>
<Typography>{'State'}</Typography>
<View style={styles.row}>
<Avatar
user={userTest}
type={IAvatarTypes.icon}
backgroundColor={'green'}
disabled={true}
/>
</View>
<Typography>{'Size'}</Typography>
<View style={styles.row}>
<Avatar user={userTest} size={IAvatarSize.S} />
</View>
<Typography>{'Badge'}</Typography>
<View style={styles.row}>
<Avatar
user={userWithLogoTest}
badge={{type: IBadgeTypes.status, value: IStatusTypes.star}}
/>
<Avatar
user={userWithLogoTest}
badge={{
type: IBadgeTypes.indicator,
value: IIndicatorTypes.secondary,
}}
/>
<Avatar
user={userWithLogoTest}
badge={{
type: IBadgeTypes.counter,
value: ICounterTypes.attention,
count: 99,
}}
/>
</View>
<Typography>{'Group'}</Typography>
<View style={styles.row}>
<AvatarGroup
groups={smallGroupDateTest.concat(Array(101).fill(defaultUserTest))}
backgroundColor={'#ff0000'}
type={IAvatarTypes.text}
groupCount={50}
/>
</View>
</View>
</View>
);
};
const stylesFn = createStyles(({spaces}) => ({
container: {
gap: spaces.Space16,
alignItems: 'center',
},
row: {
flexDirection: 'row',
gap: spaces.Space16,
},
}));
