43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { UserAvatar } from "./UserAvatar";
|
|
|
|
const meta: Meta<typeof UserAvatar> = {
|
|
title: "UI/UserAvatar",
|
|
component: UserAvatar,
|
|
parameters: { layout: "padded" },
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof UserAvatar>;
|
|
|
|
export const Flag: Story = {
|
|
args: {
|
|
userId: "user-1",
|
|
name: "Chris Example",
|
|
email: "chris@example.com",
|
|
avatarType: "flag",
|
|
},
|
|
};
|
|
|
|
export const Uploaded: Story = {
|
|
args: {
|
|
userId: "user-2",
|
|
name: "Sam Example",
|
|
email: "sam@example.com",
|
|
avatarType: "uploaded",
|
|
customAvatarUrl: "https://placehold.co/96x96/111827/adf661?text=SE",
|
|
},
|
|
};
|
|
|
|
export const AllSizes: Story = {
|
|
render: () => (
|
|
<div className="flex items-end gap-4">
|
|
{(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
|
|
<div key={size} className="flex flex-col items-center gap-1">
|
|
<UserAvatar userId={`user-${size}`} name="Flag User" email="flag@example.com" avatarType="flag" size={size} />
|
|
<span className="text-xs text-muted-foreground">{size}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
};
|