Parse invitation in messages

Took 1 hour 33 minutes

src/components/chat/Message.tsx

@@ -1,18 +1,28 @@
-import {Flex, Text} from '@chakra-ui/react';
+import type {Message as MessageType} from '@prisma/client';
-import type {Message as MessageType, User} from '@prisma/client';
+import MessageText from '@/components/chat/MessageText';
+import React from 'react';
+import { Icon } from "leaflet";
+import MessageMap from '@/components/chat/MessageMap';
 
 type Props = {
   align: "left" | 'right'
   message: MessageType
 }
 
-const Message = ({message, align}: Props) => (
+const Message = ({message, align}: Props) => {
-    <Flex justifyContent={align}>
+  if (message.text.match(/<!.+>/g)) {
-      <Text maxW={"70%"} w={'fit-content'} bg={'purple.500'} borderRadius={10}
+    const regex = /<!lon=(?<lon>-?\d+\.\d+),lat=(?<lat>-?\d+\.\d+),name=(?<name>.+)>/g;
-            color={'white'} px={'10px'} py={'5px'}>
+    const p = regex.exec(message.text)?.groups as unknown as {
-        {message.text}
+      lon: number
-      </Text>
+      lat: number
-    </Flex>
+      name: string
-);
+    }
+    if (p) return <MessageMap align={align} point={p}/>
+  }
+
+  return (
+      <MessageText message={message} align={align} />
+  )
+}
 
 export default Message;

src/components/chat/MessageMap.tsx

@@ -0,0 +1,15 @@
+import {Text} from '@chakra-ui/react';
+
+type Props = {
+  align: 'left' | 'right'
+  point: {
+    lon: string
+    lat: string
+    name: string
+  }
+}
+
+export default function MessageMap({align, point}: Props) {
+  const {lon, lat, name} = point;
+  return <Text align={align}>{lon}, {lat}, {name}</Text>;
+}

src/components/chat/MessageText.tsx

@@ -0,0 +1,18 @@
+import {Flex, Text} from '@chakra-ui/react';
+import type {Message as MessageType, User} from '@prisma/client';
+
+type Props = {
+  align: 'left' | 'right'
+  message: MessageType
+}
+
+const MessageText = ({message, align}: Props) => (
+    <Flex justifyContent={align}>
+      <Text maxW={'70%'} w={'fit-content'} bg={'purple.500'} borderRadius={10}
+            color={'white'} px={'10px'} py={'5px'}>
+        {message.text}
+      </Text>
+    </Flex>
+);
+
+export default MessageText;

src/pages/chat/[id].tsx

@@ -61,7 +61,7 @@ export default function ChatId() {
 
         <Navbar/>
 
-        <Container>
+        <Container pt={20}>
           <MessageList user={session.user as User} messages={messages}/>