forked from cerc-io/snowballtools-base
77 lines
1.5 KiB
TypeScript
77 lines
1.5 KiB
TypeScript
import { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import { Avatar, AvatarVariants } from 'components/shared/Avatar';
|
|
import { avatars, avatarsFallback } from 'pages/components/renders/avatar';
|
|
|
|
const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44];
|
|
const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue'];
|
|
|
|
const meta: Meta<typeof Avatar> = {
|
|
component: Avatar,
|
|
title: 'Components/Avatar',
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
size: {
|
|
control: 'select',
|
|
options: avatarSizes,
|
|
},
|
|
imageSrc: {
|
|
control: 'text',
|
|
},
|
|
initials: {
|
|
control: 'text',
|
|
},
|
|
type: {
|
|
control: 'select',
|
|
options: avatarVariants,
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof Avatar>;
|
|
|
|
export const Default: Story = {
|
|
render: ({ initials, imageSrc, size, type, ...arg }) => (
|
|
<Avatar
|
|
initials={initials}
|
|
imageSrc={imageSrc}
|
|
size={size}
|
|
type={type}
|
|
{...arg}
|
|
/>
|
|
),
|
|
};
|
|
|
|
export const Fallback: Story = {
|
|
render: ({ initials, imageSrc, size, type, ...arg }) => (
|
|
<Avatar
|
|
initials={initials}
|
|
imageSrc={imageSrc}
|
|
size={size}
|
|
type={type}
|
|
{...arg}
|
|
/>
|
|
),
|
|
args: {
|
|
initials: 'SY',
|
|
},
|
|
};
|
|
|
|
export const Sizes: Story = {
|
|
render: () => (
|
|
<div className="flex gap-5 flex-wrap">
|
|
{avatars.map((avatar) => avatar)}
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const FallbackAll: Story = {
|
|
render: () => (
|
|
<div className="flex gap-5 flex-wrap">
|
|
{avatarsFallback.map((avatar) => avatar)}
|
|
</div>
|
|
),
|
|
};
|