react: fix incorrect use of keys

Signed-off-by: Paul W. <lambdapaul@protonmail.com>

components/recent-posts.tsx

@@ -4,47 +4,47 @@ import style from '../styles/recent-posts.module.css';
 import PostsInfo from '../public/posts.json';
 
 function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
-    return (
-        <div className={style.block}>
-            <span className={style.postDate}>
-                {toRelativeDate(new Date(otime))}
-            </span>
-            <div className={style.postTitle}>
-                <Link href={`/posts/${slug}`}>
-                    {title}
-                </Link>
-            </div>
-        </div>
-    );
+	return (
+		<div className={style.block}>
+			<span className={style.postDate}>
+				{toRelativeDate(new Date(otime))}
+			</span>
+			<div className={style.postTitle}>
+				<Link href={`/posts/${slug}`}>
+					{title}
+				</Link>
+			</div>
+		</div>
+	);
 }
 
 function RecentPosts() {
-    const posts = Object.entries(PostsInfo).reverse();
-    if (!posts.length)
-        return <></>;
-    return (
-        <div className='block'>
-            <h2>Recent Posts</h2>
-            <div className={style.container}>
-                {posts?.slice(0, 10)
-                    .map(([slug, post]: any, i: number) => {
-                        return (
-                            <PostBlock
-                                key={i}
-                                slug={slug}
-                                title={post.title}
-                                otime={post.otime} />
-                        );
-                    })}
-            </div>
-            {
-                posts.length > 10 &&
-                <div className={style.more}>
-                    <Link href='/posts' >More...</Link>
-                </div>
-            }
-        </div>
-    );
+	const posts = Object.entries(PostsInfo).reverse();
+	if (!posts.length)
+		return <></>;
+	return (
+		<div className='block'>
+			<h2>Recent Posts</h2>
+			<div className={style.container}>
+				{posts?.slice(0, 10)
+					.map(([slug, post]: any, i: number) => {
+						return (
+							<PostBlock
+								key={slug}
+								slug={slug}
+								title={post.title}
+								otime={post.otime} />
+						);
+					})}
+			</div>
+			{
+				posts.length > 10 &&
+				<div className={style.more}>
+					<Link href='/posts' >More...</Link>
+				</div>
+			}
+		</div>
+	);
 }
 
 export default RecentPosts;