Mantine rewrite

frontend/package.json

@@ -9,12 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "framer-motion": "^6.5.1",
+    "@mantine/core": "^5.0.2",
+    "@mantine/dates": "^5.0.2",
+    "@mantine/hooks": "^5.0.2",
+    "@mantine/modals": "^5.0.2",
+    "@mantine/notifications": "^5.0.2",
+    "dayjs": "^1.11.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",

frontend/src/App.tsx

@@ -1,18 +1,28 @@
-import { Box, Flex } from '@chakra-ui/react'
-import { useState } from 'react'
+import { AppShell, Box, Grid, Stack } from "@mantine/core"
+import ChannelList from "./components/ChannelList"
+import Header from "./components/Header"
+import MemberList from "./components/MemberList"
+import Message from "./components/Message"
 
 function App() {
   return (
-    <>
-      <Flex direction="column" height="100%">
-        <Box bg="red" flexGrow="1">
-          <h1>Hello World!</h1>
-        </Box>
-        <Box>
-          <h1>Hello</h1>
-        </Box>
-      </Flex>
-    </>
+    <AppShell
+      padding="md"
+      navbar={<ChannelList />}
+      header={<Header />}>
+      <Grid>
+        <Grid.Col span={10}>
+          <Stack sx={{ overflowY: "scroll" }}>
+            {[...Array(10)].map((e, i) => (
+              <Message />
+            ))}
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={2}>
+          <MemberList />
+        </Grid.Col>
+      </Grid>
+    </AppShell>
   )
 }
 

frontend/src/components/ChannelList.tsx

@@ -0,0 +1,14 @@
+import { Navbar, NavLink } from "@mantine/core";
+import { Hash } from "react-feather";
+
+function ChannelList() {
+  return (
+    <Navbar width={{ base: 300 }} p="xs">
+      {[...Array(4)].map((e, i) => (
+        <NavLink label={`Channel ${i+1}`} icon={<Hash />}/>
+      ))}
+    </Navbar>
+  )
+}
+
+export default ChannelList

frontend/src/components/Header.tsx

@@ -0,0 +1,17 @@
+import { Header as MHeader, Group, Text, Space } from '@mantine/core';
+
+function Header() {
+  return (
+    <MHeader height={60} p="xs" sx={(theme) => ({
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[6],
+      color: 'white'
+    })}>
+      <Group sx={{ height: "100%" }}>
+        <Text size="xl" my="auto" sx={{ width: "280px" }}>Echo Web</Text>
+        <Text size="md" my="auto">Channel 1</Text>
+      </Group>
+    </MHeader>
+  )
+}
+
+export default Header

frontend/src/components/MemberList.tsx

@@ -0,0 +1,9 @@
+import { Navbar, NavLink } from "@mantine/core"
+
+function MemberList() {
+  return (
+    <p>Member List</p>
+  )
+}
+
+export default MemberList

frontend/src/components/Message.tsx

@@ -0,0 +1,21 @@
+import { Avatar, Box, Group, Stack, Text } from "@mantine/core"
+
+function Message() {
+  return (
+    <Group sx={{ flexWrap: "nowrap" }}>
+      <Avatar color="cyan" radius="xl" sx={{ flexGrow: 0, flexShrink: 0, marginBottom: "auto" }}>LS</Avatar>
+      <Stack spacing="xs" sx={{ flexGrow: 1, flexShrink: 1 }}>
+        <Text>
+          Author
+          {' '}
+          <Text component="span" size="sm" my="auto" color="dimmed">at 4:13pm</Text>
+        </Text>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nemo nisi saepe quasi eaque laudantium autem aliquid eligendi, nihil aut id sunt iusto nulla. Modi ut provident obcaecati quibusdam veritatis?
+        </Text>
+      </Stack>
+    </Group>
+  )
+}
+
+export default Message

frontend/src/main.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { ChakraProvider } from '@chakra-ui/react'
+import { MantineProvider } from '@mantine/core';
 import App from './App'
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <ChakraProvider>
+    <MantineProvider withGlobalStyles withNormalizeCSS>
       <App />
-    </ChakraProvider>
+    </MantineProvider>
   </React.StrictMode>
 )