eventx-design-system
Version:
Design System do EventX
68 lines (67 loc) • 1.29 kB
JavaScript
import { Avatar } from './Avatar';
const meta = {
title: 'Components/Avatar',
component: Avatar,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg', 'xl'],
},
src: {
control: { type: 'text' },
},
alt: {
control: { type: 'text' },
},
fallback: {
control: { type: 'text' },
},
},
};
export default meta;
export const Default = {
args: {
fallback: 'JD',
},
};
export const WithImage = {
args: {
src: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
alt: 'John Doe',
fallback: 'JD',
},
};
export const Small = {
args: {
size: 'sm',
fallback: 'JD',
},
};
export const Large = {
args: {
size: 'lg',
fallback: 'JD',
},
};
export const ExtraLarge = {
args: {
size: 'xl',
fallback: 'JD',
},
};
export const WithChildren = {
args: {
size: 'lg',
children: '👤',
},
};
export const Interactive = {
args: {
size: 'md',
fallback: 'JD',
},
};