chore: changed to using fixed height and Image component for better p…

…erformance
hackerspace-ntnu · Jan 24, 2024 · c14621a · c14621a
1 parent 918c409
commit c14621a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 17 deletions.
diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -4,6 +4,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { cx } from '@/lib/utils';
 
 import { NewsCard } from '@/components/news/NewsCard';
+import { Separator } from '@/components/ui/Separator';
 
 export async function generateMetadata({
   params: { locale },
@@ -53,7 +54,7 @@ export default function 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'>
+      <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(
@@ -62,12 +63,14 @@ export default function News({
               index === 3 && 'row-span-1 xs:col-span-2 md:col-span-1',
             )}
             key={data.id}
+            id={data.id}
             title={data.title}
             date={data.date}
             photoUrl={data.photoUrl}
           />
         ))}
       </div>
+      <Separator className='my-6' />
     </>
   );
 }
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 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'>
+          <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'>
             {children}
           </div>
         </RootProviders>

diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -10,7 +10,12 @@ type Props = {
 
 function Main({ children, mainClassName, className }: Props) {
   return (
-    <main className={cx('flex h-full w-full justify-center', mainClassName)}>
+    <main
+      className={cx(
+        'flex h-full w-full flex-grow 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
@@ -1,5 +1,9 @@
+import Image from 'next/image';
+
+import { Link } from '@/lib/navigation';
 import { cx } from '@/lib/utils';
 
+import { Button } from '@/components/ui/Button';
 import {
   Card,
   CardDescription,
@@ -9,21 +13,29 @@ import {
 
 type NewsCardProps = {
   className?: string;
+  id: number;
   title: string;
   date: string;
   photoUrl: string;
 };
 
-function NewsCard({ className, title, date, photoUrl }: NewsCardProps) {
+function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
   return (
     <Card
       className={cx(
-        'flex h-full min-h-32 w-full bg-cover bg-center',
+        'relative 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'>
+      <Image
+        className='rounded-lg'
+        src={`/${photoUrl}`}
+        alt={title}
+        layout='fill'
+        objectFit='cover'
+        objectPosition='center'
+      />
+      <CardHeader className='mt-auto w-full rounded-b-lg 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>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -58,16 +58,7 @@ 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: {
+      height: {
         '104': '26rem',
         '112': '28rem',
         '120': '30rem',