add: added a pig

front/src/components/MessageComponent.tsx

@@ -23,6 +23,11 @@ export default function MessageComponent({ message, user, channel, deleteMessage
                 return <span key={index}>{word} </span>;
             })}
             <p>{new Date(message.date * 1000).toLocaleString()}</p>
+            <div>
+                {message.content.toLocaleLowerCase().includes("gros cochon") && (
+                    <img src="/pig.png" alt="Gros cochon" className="pig" />
+                )}
+            </div>
             {channel && deleteMessage ? (
                 user?.id === message.user_id || user?.id === channel?.owner_id || user?.admin === 1) && (
                     <button onClick={() => {deleteMessage(message.id)}}>Delete</button>

front/src/index.css

@@ -8,4 +8,8 @@ html {
 
 .osaka {
     width: 200px;
+}
+
+.pig {
+    width: 100px;
 }

front/src/styles/ChannelPage.css

@@ -1,7 +1,7 @@
 .channel-page {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: center;
     width: 100%;
     min-height: 100vh;