cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

avatar.stories.tsx (2550B)

      1 import { Meta, StoryObj } from '@storybook/react';
      2 import Avatar from './avatar';
      3 import { OnlineState } from '../../app/sdk/api/otherEnums';
      4 
      5 const meta: Meta<typeof Avatar> = {
      6     title: 'Chat/Avatar',
      7     component: Avatar,
      8     argTypes: {
      9         avatarUrl: {
     10             required: false,
     11             name: "Avatar URL",
     12             description: "The URL of the avatar image",
     13         },
     14         displayname: {
     15             required: true,
     16             name: "User ID",
     17             description: "The DISPLAY name of the User",
     18         },
     19         dm: {
     20             required: false,
     21             defaultValue: false,
     22             control: "boolean",
     23             name: "DM",
     24             description: "Wether the Avatar is used for a DM",
     25         },
     26         online: {
     27             required: false,
     28             defaultValue: false,
     29             control: "boolean",
     30             name: "Online",
     31             description: "Wether the user is online. Only used if dm is true",
     32         },
     33     }
     34 };
     35 
     36 export default meta;
     37 type Story = StoryObj<typeof Avatar>;
     38 
     39 export const Fallback: Story = {
     40     args: {
     41         displayname: "test",
     42         dm: false,
     43         online: OnlineState.Unknown,
     44         avatarUrl: ""
     45     }
     46 };
     47 
     48 export const Image: Story = {
     49     args: {
     50         displayname: "test",
     51         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     52         dm: false,
     53         online: OnlineState.Unknown,
     54     }
     55 };
     56 
     57 export const DMOffline: Story = {
     58     args: {
     59         displayname: "test",
     60         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     61         dm: true,
     62         online: OnlineState.Offline,
     63     }
     64 };
     65 
     66 
     67 export const DMUnknown: Story = {
     68     args: {
     69         displayname: "test",
     70         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     71         dm: true,
     72         online: OnlineState.Unknown,
     73     }
     74 };
     75 
     76 export const DMOnline: Story = {
     77     args: {
     78         displayname: "test",
     79         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     80         dm: true,
     81         online: OnlineState.Online,
     82     }
     83 };
     84 
     85 export const DMNoAvatarOffline: Story = {
     86     args: {
     87         displayname: "test",
     88         avatarUrl: "",
     89         dm: true,
     90         online: OnlineState.Offline,
     91     }
     92 };
     93 
     94 export const DMNoAvatarUnknown: Story = {
     95     args: {
     96         displayname: "test",
     97         avatarUrl: "",
     98         dm: true,
     99         online: OnlineState.Unknown,
    100     }
    101 };
    102 
    103 export const DMNoAvatarOnline: Story = {
    104     args: {
    105         displayname: "test",
    106         avatarUrl: "",
    107         dm: true,
    108         online: OnlineState.Online,
    109     }
    110 };