declare mock messages separately

Co-authored-by: Demian Parkhomenko <[email protected]>

src/app/page.jsx

@@ -1,29 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import Message from '@/components/message'
 
-export default function Home() {
-  const [timeStamp, setTimeStamp] = useState(0)
-
-  useEffect(() => {
-    setTimeStamp(Date.now())
-  }, [])
+const now = Date.now()
+const MOCK_MESSAGES = [
+  { sentAt: now - 1000 * 60 * 30, content: `...` },
+  { sentAt: now - 1000 * 60 * 20, content: `I\'m not empty` },
+  { sentAt: now - 1000 * 60 * 10, content: `Hello, i\'m a message! 😎` },
+  {
+    sentAt: now,
+    content:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, porro',
+  },
+]
 
+export default function Home() {
   return (
     <main className="flex flex-col gap-3 p-3">
-      <Message sentAt={timeStamp}>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae
-        architecto quis iure ex id voluptatum reprehenderit quod cum laboriosam.
-        Dicta temporibus quis sed assumenda tempore perferendis voluptas magnam
-        minima dignissimos! Dignissimos porro ea incidunt quae blanditiis,
-        exercitationem deserunt beatae omnis temporibus officiis, consequatur
-        nulla accusamus commodi officia minus, ullam unde optio nisi similique
-        ab maiores? Perferendis aliquid minus laudantium error.
-      </Message>
-      <Message sentAt={timeStamp}>Hello, i'm a message! 😎</Message>
-      <Message sentAt={timeStamp}>I'm not empty</Message>
-      <Message sentAt={timeStamp}>...</Message>
+      {MOCK_MESSAGES.map(({ sentAt, content }, i) => (
+        <Message key={i} sentAt={sentAt}>
+          {content}
+        </Message>
+      ))}
     </main>
   )
 }