diff --git a/messages/en.json b/messages/en.json index 8751a5e..e115929 100644 --- a/messages/en.json +++ b/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" } } diff --git a/messages/no.json b/messages/no.json index 8b3463b..b8e079c 100644 --- a/messages/no.json +++ b/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" } } diff --git a/src/app/[locale]/(dashboard)/news/[article]/page.tsx b/src/app/[locale]/(dashboard)/news/[article]/page.tsx index 23de1b5..c5f7558 100644 --- a/src/app/[locale]/(dashboard)/news/[article]/page.tsx +++ b/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 ( - <> -

{article.title}

-
- {article.title} -
-
- -
-

{author.name}

- - {t('readTime', { count: Math.ceil(minutes) })} -   •   - {article.date} - +
+
+
+ {article.title} +
+

{article.title}

+
+
+
+ +
+

{author.name}

+ + {t('readTime', { count: Math.ceil(minutes) })} +   •   + {article.date} + +
+ {article.views + ' ' + t('views')}
-

{article.content}

- +
{article.content}
+
); } diff --git a/src/components/news/ArticleCard.tsx b/src/components/news/ArticleCard.tsx index 79c0a2f..f64ed5f 100644 --- a/src/components/news/ArticleCard.tsx +++ b/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 /> diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx new file mode 100644 index 0000000..1a7582a --- /dev/null +++ b/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, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants }; diff --git a/src/mock-data/article.ts b/src/mock-data/article.ts index 5fa6b74..74f69c9 100644 --- a/src/mock-data/article.ts +++ b/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,6 +15,7 @@ const articleMockData = [ title: 'DevOps Møtet', date: '69. oktober 6969', photoUrl: 'mock.jpg', + views: 420, }, { id: 3, @@ -21,6 +23,7 @@ const articleMockData = [ title: 'Jonas er kul', date: '42. november 2023', photoUrl: 'mock.jpg', + views: 420, }, { id: 4, @@ -28,6 +31,7 @@ const articleMockData = [ title: 'Iskrem er godt', date: '18. februar 1942', photoUrl: 'mock.jpg', + views: 420, }, { id: 5, @@ -35,6 +39,7 @@ const articleMockData = [ title: 'Hvorfor er jeg her?', date: '22. oktober 2023', photoUrl: 'mock.jpg', + views: 420, }, { id: 6, @@ -42,6 +47,7 @@ const articleMockData = [ title: 'Hvorfor er jeg her?', date: '22. oktober 2023', photoUrl: 'mock.jpg', + views: 420, }, { id: 7, @@ -49,6 +55,7 @@ const articleMockData = [ title: 'Hvorfor er jeg her?', date: '22. oktober 2023', photoUrl: 'mock.jpg', + views: 420, }, { id: 8, @@ -56,6 +63,7 @@ const articleMockData = [ title: 'Dette er en veeeeldig lang overskrift som skal testes', date: '22. oktober 2023', photoUrl: 'mock.jpg', + views: 420, }, { id: 9,