Merge pull request #1283 from VolodymyrBg/VolodymyrBg

feat(Messages): implement card layout and timestamps

Author: gagdiez

examples/react/components/Messages.module.css

@@ -0,0 +1,52 @@
+.messagesContainer {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.messagesList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.messageCard {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+}
+
+.messageCard:hover {
+  transform: translateY(-2px);
+}
+
+.premiumCard {
+  background: linear-gradient(to right, #f6f0ff, #ffffff);
+  border-left: 4px solid #6b4fbb;
+}
+
+.messageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.sender {
+  color: #2f2f2f;
+  font-size: 1.1em;
+}
+
+.timestamp {
+  color: #666;
+  font-size: 0.9em;
+}
+
+.messageText {
+  margin: 0;
+  line-height: 1.5;
+  color: #4a4a4a;
+}
+

examples/react/components/Messages.tsx

@@ -1,22 +1,34 @@
 import React from "react";
 import type { Message } from "../interfaces";
+import styles from "./Messages.module.css";
 
 interface MessagesProps {
   messages: Array<Message>;
 }
 
 const Messages: React.FC<MessagesProps> = ({ messages }) => {
   return (
-    <>
+    <div className={styles.messagesContainer}>
       <h2>Messages</h2>
-      {messages.map((message, i) => (
-        // TODO: format as cards, add timestamp
-        <p key={i} className={message.premium ? "is-premium" : ""}>
-          <strong>{message.sender}</strong>:<br />
-          {message.text}
-        </p>
-      ))}
-    </>
+      <div className={styles.messagesList}>
+        {messages.map((message, i) => (
+          <div
+            key={i}
+            className={`${styles.messageCard} ${
+              message.premium ? styles.premiumCard : ""
+            }`}
+          >
+            <div className={styles.messageHeader}>
+              <strong className={styles.sender}>{message.sender}</strong>
+              <span className={styles.timestamp}>
+                {new Date().toLocaleTimeString()}
+              </span>
+            </div>
+            <p className={styles.messageText}>{message.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };