feat: added link to writing a new article

messages/en.json

@@ -43,6 +43,7 @@
   "news": {
     "title": "News",
     "page": "Page",
-    "internalArticle": "This is an internal article"
+    "internalArticle": "This is an internal article",
+    "newArticle": "New article"
   }
 }

messages/no.json

@@ -43,6 +43,7 @@
   "news": {
     "title": "Nyheter",
     "page": "Side",
-    "internalArticle": "Dette er en intern artikkel"
+    "internalArticle": "Dette er en intern artikkel",
+    "newArticle": "Ny artikkel"
   }
 }

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

@@ -1,10 +1,13 @@
+import { SquarePen } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
+import { Link } from '@/lib/navigation';
 import { cx } from '@/lib/utils';
 
 import { NewsCard } from '@/components/news/NewsCard';
 import { NewsItemGrid } from '@/components/news/NewsItemGrid';
+import { Button } from '@/components/ui/Button';
 import { Separator } from '@/components/ui/Separator';
 
 export async function generateMetadata({
@@ -190,9 +193,18 @@ export default function News({
   ];
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');
+  // TODO: Button to create new article should only be visible when logged in
   return (
     <>
-      <h1 className='my-4'>{t('title')}</h1>
+      <div className='flex items-center justify-between'>
+        <h1 className='my-4'>{t('title')}</h1>
+        <Button asChild size='sm'>
+          <Link href='/news/new'>
+            <SquarePen className='mr-2 h-4 w-4' />
+            {t('newArticle')}
+          </Link>
+        </Button>
+      </div>
       <div className='grid h-192 grid-rows-4 gap-4 xs:h-96 xs:grid-cols-3 xs:grid-rows-2 md:grid-cols-4 lg:h-112'>
         {mockData.slice(0, 4).map((data, index) => (
           <NewsCard

src/components/settings/ProfileMenu.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/DropdownMenu';
 
 function ProfileMenu({ t }: { t: { profile: string; signIn: string } }) {
+  // TODO: User Icon Color should only have the primary color when logged in
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

src/lib/config.ts

@@ -18,6 +18,10 @@ const pathnames = {
     en: '/news',
     no: '/nyheter',
   },
+  '/news/new': {
+    en: '/news/new',
+    no: '/nyheter/ny',
+  },
   '/news/[articleId]': {
     en: '/news/[articleId]',
     no: '/nyheter/[articleId]',