Add message component (#12)

PR: #12
dev-KPI · Sep 25, 2023 · 5d9cefc · 5d9cefc
1 parent d3191c0
commit 5d9cefc
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 9 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
 }
diff --git a/public/icons/avatar.svg b/public/icons/avatar.svg
diff --git a/src/app/global.css b/src/app/global.css
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.body {
-  @apply h-screen flex items-center justify-center bg-slate-300;
+html,
+body {
+  @apply min-h-screen;
 }
diff --git a/src/app/layout.js → src/app/layout.jsx b/src/app/layout.js → src/app/layout.jsx
@@ -5,7 +5,9 @@ import './global.css'
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className="body">{children}</body>
+      <body className="flex flex-col bg-slate-300">
+        <main>{children}</main>
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.js b/src/app/page.js
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -0,0 +1,26 @@
+'use client'
+
+import Message from '@/components/message'
+
+const now = Date.now()
+const MOCK_MESSAGES = [
+  { sentAt: now - 1000 * 60 * 30, content: `...` },
+  { 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">
+      {MOCK_MESSAGES.map(({ sentAt, content }, i) => (
+        <Message key={i} sentAt={sentAt}>
+          {content}
+        </Message>
+      ))}
+    </main>
+  )
+}
diff --git a/src/components/message.jsx b/src/components/message.jsx
@@ -0,0 +1,25 @@
+import { timeFormatter } from '@/utils/getFormattedDate'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function Message({ sentAt, children }) {
+  const { format: formatTime } = timeFormatter()
+
+  return (
+    <div className="flex items-end gap-2">
+      <Link className="rounded-full overflow-hidden" href="/">
+        <Image
+          className="object-center object-cover"
+          src="/icons/avatar.svg"
+          width={38}
+          height={38}
+          alt="Picture of the author"
+        />
+      </Link>
+      <div className="flex justify-between gap-2 rounded-lg rounded-bl-none w-fit max-w-md py-2 px-3 bg-orange-100">
+        <p className="break-words">{children}</p>
+        <span className="text-xs self-end">{formatTime(sentAt)}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/utils/getFormattedDate.js b/src/utils/getFormattedDate.js
@@ -0,0 +1,7 @@
+export const timeFormatter = (options) =>
+  new Intl.DateTimeFormat('en', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+    ...options,
+  })