style: added hover effect to NewsCard

hackerspace-ntnu · Jan 25, 2024 · 8cbb828 · 8cbb828
1 parent 83be908
commit 8cbb828
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 5 deletions.
diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -48,6 +48,125 @@ export default function News({
       date: '18. februar 1942',
       photoUrl: 'mock.jpg',
     },
+    {
+      id: 5,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 6,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 7,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 8,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 9,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 10,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+    {
+      id: 11,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 12,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 13,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 14,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 15,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 16,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 17,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 18,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 19,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 20,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 21,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
+
+    {
+      id: 22,
+      title: 'Hvorfor er jeg her?',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
   ];
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');

diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
@@ -22,26 +22,26 @@ type NewsCardProps = {
 function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
   return (
     <Button
-      className={cx('whitespace-normal font-normal', className)}
+      className={cx('group whitespace-normal font-normal', className)}
       asChild
       variant='none'
       size='none'
     >
       <Link href={`/news/${id}`}>
         <Card
           className={cx(
-            'relative flex h-full min-h-32 w-full bg-cover bg-center',
+            'relative flex h-full min-h-32 w-full overflow-hidden bg-cover bg-center',
             className,
           )}
         >
           <Image
-            className='rounded-lg object-cover object-center'
+            className='rounded-lg object-cover object-center transition-transform duration-300 group-hover:scale-105'
             src={`/${photoUrl}`}
             alt={title}
             fill
           />
-          <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'>
+          <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80 dark:supports-[backdrop-filter]:bg-background/60 lg:p-6'>
+            <CardTitle className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'>
               {title}
             </CardTitle>
             <CardDescription className='line-clamp-1 text-xs sm:text-sm'>