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, + })