feat(frontend) new tag filter, new landing page

frontend/app/(pages)/blog/post/[id]/Headers.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
+import TagChip from '@/app/(pages)/blog/post/[id]/TagChip';
 
 type Props = {
     title: string;
@@ -50,7 +51,7 @@ const Headers = (post: Props) => {
                             {
                                 post.tags.map((tag: string, key: any) => (
                                     <li key={ key } className={ `mx-1 mb-1` }>
-                                        <Chip>{ tag }</Chip>
+                                        <TagChip tag={ tag } />
                                     </li>
                                 ))
                             }

frontend/app/(pages)/blog/post/[id]/TagChip.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+import { Chip } from '@nextui-org/react';
+import { useRouter } from 'next/navigation';
+
+const TagChip = ({ tag }: { tag: string }) => {
+    const router = useRouter();
+
+    return (
+        <div onClick={ () => router.push(`/blog?tags=${ tag }`) }>
+            <Chip
+                className={ 'hover:border-amber-400 hover:dark:border-amber-700  transition-all' }
+                variant={ 'faded' }
+            >{ tag }</Chip>
+        </div>
+    );
+};
+
+export default TagChip;

frontend/app/(pages)/blog/post/components/AnimationPostList.tsx

@@ -7,7 +7,16 @@ import * as motion from 'motion/react-client';
 import { AnimatePresence } from 'motion/react';
 import { Post } from '@/src/api/blog/post';
 
-const PostList = ({ posts }: { posts: Post[] }) => {
+export interface HighlightSelector {
+    tags?: string[];
+}
+
+interface Props {
+    posts: Post[];
+    highlight: HighlightSelector;
+}
+
+const PostList = ({ posts, highlight }: Props) => {
     return (
         <div className={ 'w-full' }>
             <ul className={ 'flex flex-col items-center w-full space-y-7' }>
@@ -19,7 +28,7 @@ const PostList = ({ posts }: { posts: Post[] }) => {
                             transition={ { ease: 'easeOut', duration: 0.5, delay: key * .1 + .1 } }
                             key={ key }
                             className={ 'w-full' }>
-                            <BlogPostCard post={ post } />
+                            <BlogPostCard post={ post } highlightSelector={ highlight } />
                         </motion.li>)
                     ) }
                 </AnimatePresence>