feat: added news page

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "esbenp.prettier-vscode",
     "bradlc.vscode-tailwindcss",
     "lokalise.i18n-ally",
-    "vivaxy.vscode-conventional-commits"
+    "vivaxy.vscode-conventional-commits",
+    "oven.bun-vscode"
   ]
 }

messages/en.json

@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, a student-led project open to all students, offers access to new technology like 3D printers and VR equipment. Our members provide varied expertise to help with your projects, from making an LED light blink to creating a 3D model. Visit our workshop or join our Slack channel for assistance or a friendly chat."
   },
+  "ui": {
+    "close": "Close",
+    "previous": "Previous",
+    "goToPreviousPage": "Go to previous page",
+    "next": "Next",
+    "goToNextPage": "Go to next page",
+    "morePages": "More pages"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
     "news": "News",
@@ -31,5 +39,11 @@
     "NTNUKiD": "The working life network KID",
     "copyright": "Copyright",
     "allRightsReserved": "All rights reserved"
+  },
+  "news": {
+    "title": "News",
+    "page": "Page",
+    "internalArticle": "This is an internal article",
+    "newArticle": "New article"
   }
 }

messages/no.json

@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, et studentledet prosjekt åpent for alle studenter, tilbyr tilgang til ny teknologi som 3D-printere og VR-utstyr. Våre medlemmer gir variert ekspertise for å hjelpe med prosjektene dine, fra å få en LED-lys til å blinke til å lage en 3D-modell. Besøk vårt verksted eller bli med i vår Slack-kanal for assistanse eller en vennlig prat."
   },
+  "ui": {
+    "close": "Lukk",
+    "previous": "Forrige",
+    "goToPreviousPage": "Gå til forrige side",
+    "next": "Neste",
+    "goToNextPage": "Gå til neste side",
+    "morePages": "Flere sider"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
     "news": "Nyheter",
@@ -31,5 +39,11 @@
     "NTNUKiD": "Arbeidslivsnettverket KID",
     "copyright": "Opphavsrett",
     "allRightsReserved": "Alle rettigheter reservert"
+  },
+  "news": {
+    "title": "Nyheter",
+    "page": "Side",
+    "internalArticle": "Dette er en intern artikkel",
+    "newArticle": "Ny artikkel"
   }
 }

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@t3-oss/env-nextjs": "^0.7.1",
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
@@ -34,6 +35,7 @@
     "next-intl": "^3.4.4",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
+    "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.2.0",

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

@@ -1,5 +1,15 @@
+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({
   params: { locale },
 }: {
@@ -17,6 +27,217 @@ export default function News({
 }: {
   params: { locale: string };
 }) {
+  const mockData = [
+    {
+      id: 1,
+      internal: true,
+      title: 'Gruppe status: prosjekt spill',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 2,
+      internal: false,
+      title: 'DevOps Møtet',
+      date: '69. oktober 6969',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 3,
+      internal: false,
+      title: 'Jonas er kul',
+      date: '42. november 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 4,
+      internal: true,
+      title: 'Iskrem er godt',
+      date: '18. februar 1942',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 5,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 6,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 7,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 8,
+      internal: false,
+      title: 'Dette er en veeeeldig lang overskrift som skal testes',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 9,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 10,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 11,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 12,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 13,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 14,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 15,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 16,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 17,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 18,
+      internal: false,
+      title: '18',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 19,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 20,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 21,
+      internal: false,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 22,
+      internal: true,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 23,
+      internal: false,
+      title: '23',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+  ];
   unstable_setRequestLocale(locale);
-  return <div>this should be news page</div>;
+  const t = useTranslations('news');
+  // TODO: Button to create new article should only be visible when logged in
+  return (
+    <>
+      <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
+            className={cx(
+              index === 0 && 'row-span-1 xs:col-span-2 md:row-span-2',
+              index === 1 && 'col-span-1 row-span-1 md:col-span-2',
+              index === 3 && 'row-span-1 xs:col-span-2 md:col-span-1',
+            )}
+            key={data.id}
+            id={data.id}
+            internal={data.internal}
+            title={data.title}
+            date={data.date}
+            photoUrl={data.photoUrl}
+            t={{
+              internalArticle: t('internalArticle'),
+            }}
+          />
+        ))}
+      </div>
+      <Separator className='my-6' />
+      <NewsItemGrid
+        newsData={mockData}
+        t={{
+          morePages: useTranslations('ui')('morePages'),
+          goToPreviousPage: useTranslations('ui')('goToPreviousPage'),
+          goToNextPage: useTranslations('ui')('goToNextPage'),
+          previous: useTranslations('ui')('previous'),
+          next: useTranslations('ui')('next'),
+          page: t('page'),
+          internalArticle: t('internalArticle'),
+        }}
+      />
+    </>
+  );
 }

src/components/layout/Footer.tsx

@@ -18,7 +18,7 @@ function Footer() {
   const t = useTranslations('layout');
   const year = new Date().getFullYear();
   return (
-    <footer className='z-10 flex w-full justify-center border-t border-border/40 bg-background/95 px-11 py-10 md:px-16 lg:px-24'>
+    <footer className='flex w-full justify-center border-t border-border/40 bg-background/95 px-11 py-10 md:px-16 lg:px-24'>
       <div className='w-full max-w-screen-2xl text-sm'>
         <div className='grid grid-cols-1 gap-x-4 gap-y-12 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'>
           <div>
@@ -115,9 +115,11 @@ function Footer() {
             <h4>{t('links')}</h4>
             <Nav
               className='ml-2 mt-2 space-y-1.5'
-              news={t('news')}
-              events={t('events')}
-              about={t('about')}
+              t={{
+                news: t('news'),
+                events: t('events'),
+                about: t('about'),
+              }}
             />
           </div>
           <div>

src/components/layout/Header.tsx

@@ -10,31 +10,47 @@ import { ProfileMenu } from '@/components/settings/ProfileMenu';
 function Header() {
   const t = useTranslations('layout');
   return (
-    <header className='sticky top-0 z-10 flex w-full justify-center border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
+    <header className='sticky top-0 z-20 flex w-full justify-center border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
       <div className='flex h-14 w-full max-w-screen-2xl items-center justify-between'>
         <MobileSheet
           className='flex md:hidden'
-          news={t('news')}
-          events={t('events')}
-          about={t('about')}
+          t={{
+            news: t('news'),
+            events: t('events'),
+            about: t('about'),
+            close: useTranslations('ui')('close'),
+          }}
         />
         <LogoLink />
         <div className='flex gap-10'>
           <Nav
             className='hidden items-center gap-6 text-sm md:flex'
-            news={t('news')}
-            events={t('events')}
-            about={t('about')}
+            t={{
+              news: t('news'),
+              events: t('events'),
+              about: t('about'),
+            }}
           />
-          <div>
-            <LocaleMenu changeLocale={t('changeLocale')} />
+          <div className='flex'>
+            <LocaleMenu
+              t={{
+                changeLocale: t('changeLocale'),
+              }}
+            />
             <DarkModeMenu
-              toggleTheme={t('toggleTheme')}
-              light={t('light')}
-              dark={t('dark')}
-              system={t('system')}
+              t={{
+                toggleTheme: t('toggleTheme'),
+                light: t('light'),
+                dark: t('dark'),
+                system: t('system'),
+              }}
+            />
+            <ProfileMenu
+              t={{
+                profile: t('profile'),
+                signIn: t('signIn'),
+              }}
             />
-            <ProfileMenu profile={t('profile')} signIn={t('signIn')} />
           </div>
         </div>
       </div>