feat(bolg) add animation

app/blog/BlogPostCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardBody, CardFooter } from '@nextui-org/card';
-import { Chip, Image } from '@nextui-org/react';
-import NextImage from 'next/image';
+import { Chip } from '@nextui-org/react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
 
@@ -29,10 +29,8 @@ function BlogPostCard({ post }: Props) {
                   isHoverable
             >
 
-
                 { header_img !== '' && <div className={ `w-full overflow h-80 relative` }>
                     <Image
-                        as={ NextImage }
                         alt={ 'cover picture' }
                         src={ header_img }
                         className={ `w-full object-cover rounded-b-none` }
@@ -41,7 +39,6 @@ function BlogPostCard({ post }: Props) {
                             'backdropFilter': 'blur(20px)'
                         } }
                         fill
-                        removeWrapper
                     ></Image>
                 </div> }
 

app/blog/page.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import fetch_posts_list from '@/app/blog/fetch_posts_list';
 import BlogPostCard from '@/app/blog/BlogPostCard';
 import { Card, CardBody } from '@nextui-org/card';
+import { MotionDiv } from '@/app/public/MotionDiv';
 
 async function Blog() {
 
@@ -11,9 +12,15 @@ async function Blog() {
         return (
             // blog list
             <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                { posts.map((post: JSON, key: React.Key | null | undefined) => (
+                { posts.map((post: JSON, key: number) => (
                     <li key={ key } className={ 'w-full' }>
-                        <BlogPostCard post={ post } />
+                        <MotionDiv
+                            initial={ { y: 20, opacity: 0 } }
+                            animate={ { y: 0, opacity: 1 } }
+                            transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
+                        >
+                            <BlogPostCard post={ post } />
+                        </MotionDiv>
                     </li>)
                 ) }
             </ul>

app/blog/post/[id]/page.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import Generate from '@/app/blog/post/[id]/generate';
+import { MotionDiv } from '@/app/public/MotionDiv';
 
 function BlogReader({ params }: { params: { id: string } }) {
 
     return (
-        <div className={ `w-full` }>
-            <Generate id={ params.id } />
-        </div>
+        <MotionDiv
+            initial={ { y: 20, opacity: 0 } }
+            animate={ { y: 0, opacity: 1 } }
+            transition={ { ease: 'easeInOut', duration: 0.5 } }
+        >
+            <div className={ `w-full` }>
+                <Generate id={ params.id } />
+            </div>
+        </MotionDiv>
     );
 }
 

app/public/MotionDiv.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export const MotionDiv = motion.div;

components/Navbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { Button, Image } from '@nextui-org/react';
+import { Button } from '@nextui-org/react';
 import NextImage from 'next/image';
 import {
     IoFileTrayFull,
@@ -115,16 +115,14 @@ function Navbar() {
                 <div className={ `fixed min-h-screen h-full` }>
                     <div className={ `hidden md:block` }>
                         <div className={ `flex justify-center items-center my-7` }>
-                            <Image
-                                as={ NextImage }
+                            <NextImage
                                 src={ 'https://oss.lumither.com/blog/pictures/compr/1717153492846703409_avatar.webp' }
                                 alt={ 'avatar' }
                                 width={ 200 }
                                 height={ 200 }
                                 className={ 'rounded-full justify-self-center' }
-                                fetchPriority={ 'high' }
-                                removeWrapper
-                            ></Image>
+                                priority={ true }
+                            ></NextImage>
                         </div>
 
                         <div>

package.json

@@ -11,9 +11,9 @@
   "dependencies": {
     "@nextui-org/react": "^2.3.5",
     "axios": "^1.6.8",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.10",
     "lxgw-wenkai-webfont": "^1.7.0",
-    "next": "14.2.2",
+    "next": "14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",