owncast/web/components/chat/ChatJoinMessage/ChatJoinMessage.stories.tsx

import { Meta } from '@storybook/react';
import { ChatJoinMessage } from './ChatJoinMessage';
import Mock from '../../../stories/assets/mocks/chatmessage-action.png';

const meta = {
  title: 'owncast/Chat/Messages/Chat Join',
  component: ChatJoinMessage,
  argTypes: {
    userColor: {
      options: ['0', '1', '2', '3', '4', '5', '6', '7'],
      control: { type: 'select' },
    },
  },
  parameters: {
    design: {
      type: 'image',
      url: Mock,
    },
    docs: {
      description: {
        component: `This is the message design an action takes place, such as a join or a name change.`,
      },
    },
  },
} satisfies Meta<typeof ChatJoinMessage>;

export default meta;

export const Regular = {
  args: {
    displayName: 'RandomChatter',
    isAuthorModerator: false,
    userColor: 3,
  },
};

export const Moderator = {
  args: {
    displayName: 'RandomChatter',
    isAuthorModerator: true,
    userColor: 2,
  },
};