feat: worked on news grid view

hackerspace-ntnu · Jan 24, 2024 · 918c409 · 918c409
1 parent 41da5cf
commit 918c409
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 8 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -31,5 +31,8 @@
     "NTNUKiD": "The working life network KID",
     "copyright": "Copyright",
     "allRightsReserved": "All rights reserved"
+  },
+  "news": {
+    "title": "News"
   }
 }
diff --git a/messages/no.json b/messages/no.json
@@ -31,5 +31,8 @@
     "NTNUKiD": "Arbeidslivsnettverket KID",
     "copyright": "Opphavsrett",
     "allRightsReserved": "Alle rettigheter reservert"
+  },
+  "news": {
+    "title": "Nyheter"
   }
 }
diff --git a/public/mock.jpg b/public/mock.jpg
diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -1,5 +1,10 @@
+import { useTranslations } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
+import { cx } from '@/lib/utils';
+
+import { NewsCard } from '@/components/news/NewsCard';
+
 export async function generateMetadata({
   params: { locale },
 }: {
@@ -17,6 +22,52 @@ export default function News({
 }: {
   params: { locale: string };
 }) {
+  const mockData = [
+    {
+      id: 1,
+      title: 'Gruppe status: prosjekt spill',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 2,
+      title: 'DevOps Møtet',
+      date: '69. oktober 6969',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 3,
+      title: 'Jonas er kul',
+      date: '42. november 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 4,
+      title: 'Iskrem er godt',
+      date: '18. februar 1942',
+      photoUrl: 'mock.jpg',
+    },
+  ];
   unstable_setRequestLocale(locale);
-  return <div>this should be news page</div>;
+  const t = useTranslations('news');
+  return (
+    <>
+      <h1 className='my-4'>{t('title')}</h1>
+      <div className='grid h-full max-h-144 min-h-160 grid-rows-4 gap-4 xs:h-1/2 xs:min-h-80 xs:grid-cols-3 xs:grid-rows-2 md:grid-cols-4 lg:h-3/5'>
+        {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}
+            title={data.title}
+            date={data.date}
+            photoUrl={data.photoUrl}
+          />
+        ))}
+      </div>
+    </>
+  );
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -84,7 +84,7 @@ export default function Localelayout({ children, params: { locale } }: Props) {
     >
       <body className='h-full w-full bg-background font-inter text-foreground antialiased'>
         <RootProviders params={{ locale: locale }}>
-          <div className='fixed bottom-0 top-0 flex h-full w-full flex-col overflow-y-scroll scroll-smooth scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80'>
+          <div className='fixed bottom-0 top-0 h-full w-full overflow-y-scroll scroll-smooth scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80'>
             {children}
           </div>
         </RootProviders>

diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -10,12 +10,7 @@ type Props = {
 
 function Main({ children, mainClassName, className }: Props) {
   return (
-    <main
-      className={cx(
-        'flex h-full w-full flex-grow justify-center',
-        mainClassName,
-      )}
-    >
+    <main className={cx('flex h-full w-full justify-center', mainClassName)}>
       <div
         className={cx(
           'h-full w-full max-w-screen-2xl px-4 sm:px-11 md:px-16 lg:px-24',

diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
@@ -0,0 +1,38 @@
+import { cx } from '@/lib/utils';
+
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
+
+type NewsCardProps = {
+  className?: string;
+  title: string;
+  date: string;
+  photoUrl: string;
+};
+
+function NewsCard({ className, title, date, photoUrl }: NewsCardProps) {
+  return (
+    <Card
+      className={cx(
+        'flex h-full min-h-32 w-full bg-cover bg-center',
+        className,
+      )}
+      style={{ backgroundImage: `url(/${photoUrl})` }}
+    >
+      <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
+        <CardTitle className='line-clamp-1 text-lg sm:text-xl lg:text-2xl'>
+          {title}
+        </CardTitle>
+        <CardDescription className='line-clamp-1 text-xs sm:text-sm'>
+          {date}
+        </CardDescription>
+      </CardHeader>
+    </Card>
+  );
+}
+
+export { NewsCard };
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cx(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cx('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cx(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cx('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cx('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cx('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -58,6 +58,24 @@ export default {
         '3-auto': 'repeat(3, auto)',
         '2-auto': 'repeat(2, auto)',
       },
+      minHeight: {
+        '104': '26rem',
+        '112': '28rem',
+        '120': '30rem',
+        '128': '32rem',
+        '144': '36rem',
+        '160': '40rem',
+        '192': '48rem',
+      },
+      maxHeight: {
+        '104': '26rem',
+        '112': '28rem',
+        '120': '30rem',
+        '128': '32rem',
+        '144': '36rem',
+        '160': '40rem',
+        '192': '48rem',
+      },
     },
   },
   plugins: [