From 5d9cefcf927eb10742bf1ac36960170cabea3c5f Mon Sep 17 00:00:00 2001 From: Anton Bochkovskyi <98012691+firehawk89@users.noreply.github.com> Date: Mon, 25 Sep 2023 22:09:26 +0300 Subject: [PATCH] Add message component (#12) PR: https://github.com/dev-KPI/messenger-frontend/pull/12 --- .eslintrc.json | 5 ++++- public/icons/avatar.svg | 4 ++++ src/app/global.css | 5 +++-- src/app/{layout.js => layout.jsx} | 4 +++- src/app/page.js | 5 ----- src/app/page.jsx | 26 ++++++++++++++++++++++++++ src/components/message.jsx | 25 +++++++++++++++++++++++++ src/utils/getFormattedDate.js | 7 +++++++ 8 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 public/icons/avatar.svg rename src/app/{layout.js => layout.jsx} (58%) delete mode 100644 src/app/page.js create mode 100644 src/app/page.jsx create mode 100644 src/components/message.jsx create mode 100644 src/utils/getFormattedDate.js diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..d2a18fa 100644 --- 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 new file mode 100644 index 0000000..fd7f2c9 --- /dev/null +++ b/public/icons/avatar.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/global.css b/src/app/global.css index 02a103f..c2e1b21 100644 --- 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 b/src/app/layout.jsx similarity index 58% rename from src/app/layout.js rename to src/app/layout.jsx index 70e0f63..175b4fd 100644 --- a/src/app/layout.js +++ b/src/app/layout.jsx @@ -5,7 +5,9 @@ import './global.css' export default function RootLayout({ children }) { return ( - {children} + +
{children}
+ ) } diff --git a/src/app/page.js b/src/app/page.js deleted file mode 100644 index fc0fab0..0000000 --- a/src/app/page.js +++ /dev/null @@ -1,5 +0,0 @@ -'use client' - -export default function Home() { - return <>Hello world! 😎 -} diff --git a/src/app/page.jsx b/src/app/page.jsx new file mode 100644 index 0000000..616f32d --- /dev/null +++ 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 ( +
+ {MOCK_MESSAGES.map(({ sentAt, content }, i) => ( + + {content} + + ))} +
+ ) +} diff --git a/src/components/message.jsx b/src/components/message.jsx new file mode 100644 index 0000000..977a9ed --- /dev/null +++ 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 ( +
+ + Picture of the author + +
+

{children}

+ {formatTime(sentAt)} +
+
+ ) +} diff --git a/src/utils/getFormattedDate.js b/src/utils/getFormattedDate.js new file mode 100644 index 0000000..0e46832 --- /dev/null +++ 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, + })