From a11d859f40248b565e3da150a3d78221ee5ac9c5 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sun, 12 May 2024 12:11:33 +0800
Subject: [PATCH] feat(frontend/blog) even better post card

---
 app/blog/BlogPostCard.tsx | 27 +++++++++++++++++++--------
 app/layout.tsx            |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/blog/BlogPostCard.tsx b/app/blog/BlogPostCard.tsx
index 693ade0..b30aa4c 100644
--- a/app/blog/BlogPostCard.tsx
+++ b/app/blog/BlogPostCard.tsx
@@ -23,32 +23,43 @@ function BlogPostCard({ post }: Props) {
 
         <div>
             <Card as={ Link } href={ `/blog/post/${ post_id }` }
-                  className={ `mx-7` }
+                  className={ `mx-7 group` }
                   isPressable
                   isHoverable
             >
+
                 { pic_url !== '' && <div className={ `w-full overflow-visible` }>
                     <Image
-                        isZoomed
-                        isBlurred
                         alt={ 'cover picture' }
                         src={ pic_url }
-                        className={ `h-80 w-full object-cover` }
+                        className={ `z-20 h-80 w-full object-cover rounded-b-none` }
+                        style={ {
+                            'maskImage': 'linear-gradient(black 95%, transparent)',
+                            'backdropFilter': 'blur(20px)'
+                        } }
                         width={ `100%` }
+                        removeWrapper
                     ></Image>
                 </div> }
 
-                <CardBody>
+                <CardBody className={ `overflow-visible` }>
                     <div className={ `flex flex-row justify-between` }>
-                        <div className={ `mx-2 mt-2` }>
-                            <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
+                        <div className={ `mx-2 ${ pic_url !== '' ? '-mt-8' : 'mt-2' }` }>
+                            <Chip className={ `mb-2 z-50` } radius={ `sm` } color={ `secondary` }
                                   variant={ `solid` }>{ category }</Chip>
                             <p className={ `text-4xl font-bold` }> { title }</p>
                             <p className={ `text-xl` }> { sub_title }</p>
                         </div>
-                        <MdNorthEast className={ `mt-4 mr-2` } size={ `40px` } />
+                        <MdNorthEast className={ `mt-1 mr-2` } size={ `40px` } />
                     </div>
                 </CardBody>
+
+             {/*   <CardBody className={ `transition-all duration-300 hidden group-hover:block` }>
+                    <div className={ `mx-2` }>
+                        <p>{ summary }</p>
+                    </div>
+                </CardBody>*/}
+
                 <CardFooter>
                     <div className={ `flex flex-row flex-wrap justify-between w-full` }>
                         <div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 3f52687..44f1b59 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-        <body>
+        <body className={`dark:bg-[#282830]`}>
         <NextThemesProvider attribute="class" defaultTheme="dark">
             <Navbar />
             { children }