feature/Implement with tailwind

package.json

@@ -45,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.4"
   }
 }

src/App.tsx

@@ -1,4 +1,5 @@
 import { ChatLayout } from './layout/ChatLayout';
+import './index.css';
 
 function App() {
   return <ChatLayout />;

src/components/Timeline/ChatMessage/index.tsx

@@ -1,30 +1,15 @@
-import { Box, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Stack } from '../../../components/core/Stack';
+import { Box } from '../../../components/core/Box';
+
 import { Message } from '../../../api/types';
 import moment from 'moment';
 
 interface ChatMessageProps {
   message: Message;
   self: string;
-  isSmallScreen: boolean;
 }
 
-const otherChartMessageSX = (isSmallScreen: boolean) => ({
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  borderRadius: '10px',
-  border: '1px solid #eaeaea',
-  minWidth: '200px',
-  maxWidth: isSmallScreen ? '240px' : '80%',
-  padding: '16px',
-  marginTop: '16px',
-  backgroundColor: '#fefefe',
-});
-
-const selfChartMessageSX = {
-  backgroundColor: '#fff59d',
-};
-
 const labelSX = { color: '#aeaeae' };
 
 const getStringOrNumberBack = (text: unknown) => {
@@ -39,31 +24,24 @@ const getDateString = (timestamp: number) => {
   return moment(timestamp).format('DD MMM YYYY HH:mm');
 };
 
-const ChatMessage = ({ message, self, isSmallScreen }: ChatMessageProps) => {
+const ChatMessage = ({ message, self }: ChatMessageProps) => {
   const { author, message: _message, timestamp } = message;
 
   const isSelf = self === author;
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: isSelf ? 'flex-end' : 'flex-start',
-      }}
-    >
-      <Box
-        sx={
-          isSelf
-            ? { ...otherChartMessageSX(isSmallScreen), ...selfChartMessageSX }
-            : otherChartMessageSX(isSmallScreen)
-        }
+    <Box className={`flex ${isSelf ? 'justify-end' : 'justify-start'}`}>
+      <Stack
+        className={`${
+          isSelf ? 'bg-[#fff59d]' : ''
+        } ${'relative rounded border-solid boder-1 border-[#eaeaea] p-[16px] bg-neutral-50 mt-[16px] min-w-200 md:max-w-[80%] lg:max-w-[80%] sm:max-w-[240px]'}`}
       >
         {!isSelf && (
           <Typography sx={labelSX}>{getStringOrNumberBack(author)}</Typography>
         )}
         <Typography>{getStringOrNumberBack(_message)}</Typography>
         <Typography sx={labelSX}>{getDateString(timestamp)}</Typography>
-      </Box>
+      </Stack>
     </Box>
   );
 };

src/components/Timeline/index.tsx

@@ -6,20 +6,14 @@ import { useChatTimeline } from '../../hooks/useChatTimeline';
 import { Error } from '../Error';
 
 const Timeline = () => {
-  const { smallDevice, data, author, hasMore, next, hasError } =
-    useChatTimeline();
+  const { data, author, hasMore, next, hasError } = useChatTimeline();
 
   const renderChatMessages = useMemo(
     () =>
       data.map((message: Message) => (
-        <ChatMessage
-          key={message._id}
-          isSmallScreen={smallDevice}
-          message={message}
-          self={author}
-        />
+        <ChatMessage key={message._id} message={message} self={author} />
       )),
-    [data, author, smallDevice]
+    [data, author]
   );
 
   if (hasError) {

src/components/core/Box/index.tsx

@@ -0,0 +1,9 @@
+const Box = ({
+  children,
+  className,
+}: {
+  children: any;
+  className?: string;
+}) => <div className={className}>{children}</div>;
+
+export { Box };

src/components/core/Stack/index.tsx

@@ -0,0 +1,12 @@
+const Stack = ({
+  children,
+  className,
+}: {
+  children: any;
+  className?: string;
+}) => {
+  const style = `flex-col ${className || ''}`;
+
+  return <div className={style}>{children}</div>;
+};
+export { Stack };

src/index.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};