feat: add views badge and make article html more semantic

messages/en.json

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

messages/no.json

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

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

@@ -9,6 +9,7 @@ import { notFound } from 'next/navigation';
 import readingTime from 'reading-time';
 
 import { AvatarIcon } from '@/components/profile/AvatarIcon';
+import { Badge } from '@/components/ui/Badge';
 
 // export async function generateStaticParams() {
 //   return articleData.map((article) => ({
@@ -48,33 +49,39 @@ export default function Article({
   const { minutes } = readingTime(article.content!);
   const author = authorData[0]!;
   return (
-    <>
-      <h2 className='first:my-4'>{article.title}</h2>
-      <section className='mb-6 md:mb-10'>
-        <Image
-          className='h-full w-full rounded-lg'
-          src={`/${article.photoUrl}`}
-          alt={article.title}
-          width={100}
-          height={100}
-        />
-      </section>
-      <section className='mb-12 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>
+    <article>
+      <header>
+        <div className='mb-10 mt-5 flex justify-center'>
+          <Image
+            className='h-auto w-full max-w-4xl rounded-lg'
+            src={`/${article.photoUrl}`}
+            alt={article.title}
+            width={1600}
+            height={900}
+            priority
+          />
+        </div>
+        <h2 className='my-4'>{article.title}</h2>
+      </header>
+      <section className='mb-6 space-y-4'>
+        <div 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>
         </div>
+        <Badge variant='secondary'>{article.views + ' ' + t('views')}</Badge>
       </section>
-      <p>{article.content}</p>
-    </>
+      <section className='my-6'>{article.content}</section>
+    </article>
   );
 }

src/components/news/ArticleCard.tsx

@@ -48,6 +48,7 @@ function ArticleCard({
             className='rounded-lg object-cover object-center transition-transform duration-300 group-hover:scale-105'
             src={`/${photoUrl}`}
             alt={title}
+            priority
             fill
           />
           <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>

src/components/ui/Badge.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { type VariantProps, cva, cx } from '@/lib/utils';
+
+const badgeVariants = cva({
+  base: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  variants: {
+    variant: {
+      default:
+        'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+      secondary:
+        'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      destructive:
+        'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cx(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/mock-data/article.ts

@@ -5,6 +5,7 @@ const articleMockData = [
     title: 'Gruppe status: prosjekt spill',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
     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!',
   },
@@ -14,48 +15,55 @@ const articleMockData = [
     title: 'DevOps Møtet',
     date: '69. oktober 6969',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 3,
     internal: false,
     title: 'Jonas er kul',
     date: '42. november 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 4,
     internal: true,
     title: 'Iskrem er godt',
     date: '18. februar 1942',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 5,
     internal: false,
     title: 'Hvorfor er jeg her?',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 6,
     internal: true,
     title: 'Hvorfor er jeg her?',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 7,
     internal: false,
     title: 'Hvorfor er jeg her?',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 8,
     internal: false,
     title: 'Dette er en veeeeldig lang overskrift som skal testes',
     date: '22. oktober 2023',
     photoUrl: 'mock.jpg',
+    views: 420,
   },
   {
     id: 9,