LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Add chat system message component. For #1998

Browse Source
This commit is contained in:
Gabe Kangas 2022-07-15 13:15:20 -07:00
parent 2c8621c873
commit f4fb7a1d41
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
4 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/chat/ChatSystemMessage.tsx
View File

@ -1,11 +0,0 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/no-unused-prop-types */
import { ChatMessage } from '../../interfaces/chat-message.model';
interface Props {
message: ChatMessage;
}
export default function ChatSystemMessage(props: Props) {
return <div>Component goes here</div>;
}

13
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss Normal file
View File

@ -0,0 +1,13 @@
@import 'styles/mixins.scss';
.chatSystemMessage {
background-color: var(--theme-unknown-2);
margin: 5px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-style: solid;
padding: 10px 10px;
max-width: 400px;
@include flexCenter;
}

9
web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx Normal file
View File

@ -0,0 +1,9 @@
import s from './ChatSystemMessage.module.scss';
interface Props {
message: string;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ChatSystemMessage({ message }: Props) {
return <div className={s.chatSystemMessage}>{message}</div>;
}

5
web/stories/ChatSystemMessage.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import ChatSystemMessage from '../components/chat/ChatSystemMessage';
import ChatSystemMessage from '../components/chat/ChatSystemMessage/ChatSystemMessage';
import Mock from './assets/mocks/chatmessage-system.png';
export default {
@ -23,3 +23,6 @@ const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMe
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Basic = Template.bind({});
Basic.args = {
message: 'This is a system message.',
};