feat: added avatar and article info to the article page

messages/en.json

@@ -44,6 +44,7 @@
   "news": {
     "title": "News",
     "internalArticle": "This is an internal article",
-    "newArticle": "New article"
+    "newArticle": "New article",
+    "readTime": "{count, plural, =0 {less than a minute} one {# minute} other {# minutes}} read"
   }
 }

messages/no.json

@@ -44,6 +44,7 @@
   "news": {
     "title": "Nyheter",
     "internalArticle": "Dette er en intern artikkel",
-    "newArticle": "Ny artikkel"
+    "newArticle": "Ny artikkel",
+    "readTime": "{count, plural, =0 {mindre enn ett minutt} one {# minutt} other {# minutter}} read"
   }
 }

package.json

@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-separator": "^1.0.3",
@@ -35,6 +36,7 @@
     "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "reading-time": "^1.5.0",
     "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.0",
     "tailwind-scrollbar": "^3.0.5",

src/app/[locale]/(dashboard)/news/[article]/page.tsx

@@ -1,6 +1,13 @@
-import { articleMockData as articleData } from '@/mock-data/article';
+import {
+  articleMockData as articleData,
+  authorMockData as authorData,
+} from '@/mock-data/article';
+import { useTranslations } from 'next-intl';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
+import readingTime from 'reading-time';
+
+import { AvatarIcon } from '@/components/profile/AvatarIcon';
 
 export async function generateStaticParams() {
   return articleData.map((article) => ({
@@ -28,15 +35,36 @@ export default function Article({
   params: { locale: string; article: string };
 }) {
   unstable_setRequestLocale(params.locale);
+  const t = useTranslations('news');
+
   const article = articleData.find(
     (article) => article.id === Number(params.article),
   );
   if (!article) {
     return notFound();
   }
+
+  const { minutes } = readingTime(article.content!);
+  const author = authorData[0]!;
   return (
     <>
       <h2 className='first:my-4'>{article.title}</h2>
+      <section className='flex items-center gap-4'>
+        <AvatarIcon
+          photoUrl={`/${author.photoUrl}`}
+          name={author.name}
+          initials={author.initials}
+        />
+        <div className='flex flex-col'>
+          <p className='font-montserrat font-semibold'>{author.name}</p>
+          <small className='text-foreground/60'>
+            {t('readTime', { count: Math.ceil(minutes) })}
+            &nbsp;&nbsp;•&nbsp;&nbsp;
+            {article.date}
+          </small>
+        </div>
+      </section>
+      <p>{article.content}</p>
     </>
   );
 }

src/components/profile/AvatarIcon.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image';
+
+import { Avatar, AvatarFallback } from '@/components/ui/Avatar';
+
+type AvatarIconProps = {
+  className?: string;
+  photoUrl: string;
+  name: string;
+  initials: string;
+};
+
+function AvatarIcon({ className, photoUrl, name, initials }: AvatarIconProps) {
+  return (
+    <Avatar className={className}>
+      {photoUrl && (
+        <Image
+          className='aspect-square h-full w-full'
+          src={photoUrl}
+          alt={name}
+          sizes='(max-width: 768px) 100%, 100%'
+          fill
+        />
+      )}
+      {!photoUrl && <AvatarFallback>{initials}</AvatarFallback>}
+    </Avatar>
+  );
+}
+
+export { AvatarIcon };

src/components/ui/Avatar.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cx(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cx(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback };

src/mock-data/article.ts

@@ -5,6 +5,8 @@ const articleMockData = [
     title: 'Gruppe status: prosjekt spill',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    content:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis aut perferendis a, deleniti accusantium amet sunt autem eligendi repellat soluta omnis, nisi quam at vero perspiciatis. Ex repellendus saepe excepturi. Quam repellendus culpa quia facilis, exercitationem ipsa voluptatem nostrum aut libero labore quisquam est sed odio modi, eius quaerat tenetur deserunt facere officiis odit quibusdam consequuntur, rem vel similique? Nesciunt. Possimus libero ab suscipit enim quia. Error rerum architecto quidem ad voluptates distinctio minima tempore vel veniam esse ipsum officia atque, voluptatem molestias magni corrupti ducimus, placeat sint blanditiis praesentium? Cumque dignissimos totam pariatur repellat quod, vitae alias nostrum! Porro sequi mollitia blanditiis nulla accusantium fugiat explicabo! Soluta rerum debitis voluptates. Esse asperiores soluta facere fuga? Quas facilis nam inventore! Reiciendis tempora autem commodi dolor in doloremque eius a veritatis doloribus aliquid. Animi ipsam voluptatum sequi, eveniet placeat laboriosam iure, ullam ex odio reiciendis dicta enim libero, cupiditate et? Non. Quis ut eos, quod laboriosam suscipit exercitationem ratione incidunt blanditiis animi veritatis. Quos possimus exercitationem dolor inventore, esse ipsum, quod placeat provident officia et ab nihil? Modi impedit soluta eveniet. Sit qui cupiditate mollitia corrupti, sapiente neque enim vel praesentium veritatis voluptatibus? Laudantium sit nulla assumenda! Esse obcaecati sint dolores quos dolorum aliquam cum excepturi autem ad, fuga culpa veritatis! Quo nisi accusantium voluptatibus ipsam quia, ratione consectetur cupiditate adipisci sequi, nobis ab animi dolorem hic. Voluptates repellat ut molestias harum eos illo, odio sapiente doloribus, minima quidem, reprehenderit eum. Optio ut repellendus repudiandae at odit! Voluptates quidem eos perferendis amet veritatis quo excepturi fuga ipsa sunt quod facilis saepe, libero ea, neque cupiditate. Sint inventore laudantium error? Consectetur, porro. Laborum id assumenda, repellat ipsam cupiditate dolorum provident quod nostrum beatae a praesentium sequi animi corporis consequuntur. Atque inventore porro eum vitae? Architecto, officiis fugit tempora deserunt temporibus totam tenetur!',
   },
   {
     id: 2,
@@ -163,4 +165,12 @@ const articleMockData = [
   },
 ];
 
-export { articleMockData };
+const authorMockData = [
+  {
+    name: 'Michael Jackson',
+    initials: 'MJ',
+    photoUrl: 'authorMock.jpg',
+  },
+];
+
+export { articleMockData, authorMockData };