Merge pull request #240 from 1chooo/feature/#239

Feature/#239

Author: 1chooo

apps/web/src/app/blog/page.tsx

@@ -2,62 +2,73 @@ import Link from 'next/link';
 import { getBlogPosts } from '@/app/db/blog';
 import PageHeader from '@/components/page-header';
 import Image from 'next/image';
+import FilterSelectBox from '@/components/blog/filter-select-box';
+import FilterList from '@/components/blog/filter-list';
 
 export const metadata = {
   title: 'Blog | Hugo ChunHo Lin (1chooo) | Open Source Enthusiast',
   description: 'Read my thoughts on software development, design, and more.',
 };
 
-export default function BlogPage() {
+let blogTags: string[] = ['All'];
+
+export default function BlogPage({ searchParams }: { searchParams: { tag?: string } }) {
   let allBlogs = getBlogPosts();
+  blogTags = ['All', ...Array.from(new Set(allBlogs.map(post => post.metadata.category ?? '')))];
+  const selectedTag = searchParams.tag || 'All';
+
+  // Filter blogs based on the selected tag
+  const filteredBlogs = selectedTag === 'All'
+    ? allBlogs
+    : allBlogs.filter(post => post.metadata.category === selectedTag);
 
   return (
     <article>
       <PageHeader title="Hugo's Blog" />
-      <ul className="blog-posts-list">
-        {allBlogs
-          .sort((a, b) => {
-            if (
-              new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
-            ) {
-              return -1;
-            }
-            return 1;
-          })
-          .map((post, index) => (
-            <li
-              key={index}
-              className="blog-post-item active"
-              data-category={post.metadata.category}
-            >
-              <Link
-                href={`/blog/${post.slug}`}
-                rel="noopener noreferrer"
+      <section className="blog-posts">
+        <FilterList selectedTag={selectedTag} blogTags={blogTags} />
+        <FilterSelectBox selectedTag={selectedTag} blogTags={blogTags} />
+
+        <ul className="blog-posts-list">
+          {filteredBlogs
+            .sort((a, b) => {
+              if (new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)) {
+                return -1;
+              }
+              return 1;
+            })
+            .map((post, index) => (
+              <li
+                key={index}
+                className="blog-post-item active"
+                data-category={post.metadata.category}
               >
-                <figure className="blog-banner-box">
-                  <Image
-                    src={post.metadata.banner}
-                    alt={post.metadata.alt || 'Blog post image'}
-                    loading="lazy"
-                    width={1600}
-                    height={900}
-                  />
-                </figure>
-                <div className="blog-content">
-                  <div className="blog-meta">
-                    <p className="blog-category">{post.metadata.category}</p>
-                    <span className="dot"></span>
-                    <time dateTime={post.metadata.publishedAt}>
-                      {new Date(post.metadata.publishedAt).toLocaleDateString()}
-                    </time>
+                <Link href={`/blog/${post.slug}`} rel="noopener noreferrer">
+                  <figure className="blog-banner-box">
+                    <Image
+                      src={post.metadata.banner}
+                      alt={post.metadata.alt || 'Blog post image'}
+                      loading="lazy"
+                      width={1600}
+                      height={900}
+                    />
+                  </figure>
+                  <div className="blog-content">
+                    <div className="blog-meta">
+                      <p className="blog-category">{post.metadata.category}</p>
+                      <span className="dot"></span>
+                      <time dateTime={post.metadata.publishedAt}>
+                        {new Date(post.metadata.publishedAt).toLocaleDateString()}
+                      </time>
+                    </div>
+                    <h3 className="h3 blog-item-title">{post.metadata.title}</h3>
+                    <p className="blog-text">{post.metadata.summary}</p>
                   </div>
-                  <h3 className="h3 blog-item-title">{post.metadata.title}</h3>
-                  <p className="blog-text">{post.metadata.summary}</p>
-                </div>
-              </Link>
-            </li>
-          ))}
-      </ul>
-    </article >
+                </Link>
+              </li>
+            ))}
+        </ul>
+      </section>
+    </article>
   );
 }

apps/web/src/app/globals.css

@@ -1049,9 +1049,23 @@ main {
   border-radius: 8px;
 }
 
+.select-item button a {
+  background: var(--eerie-black-2);
+  color: var(--light-gray);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+  text-transform: capitalize;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+}
+
 .select-item button:hover {
   --eerie-black-2: hsl(240, 2%, 20%);
 }
+.select-item button a:hover {
+  --eerie-black-2: hsl(240, 2%, 20%);
+}
 
 .project-list {
   display: grid;
@@ -1831,13 +1845,26 @@ textarea.form-input::-webkit-resizer {
     transition: var(--transition-1);
   }
 
+  .filter-item a {
+    color: var(--light-gray);
+    font-size: var(--fs-5);
+    transition: var(--transition-1);
+  }
+
   .filter-item button:hover {
     color: var(--light-gray-70);
   }
 
   .filter-item button.active {
     color: var(--orange-yellow-crayola);
   }
+  .filter-item a:hover {
+    color: var(--light-gray-70);
+  }
+
+  .filter-item a.active {
+    color: var(--orange-yellow-crayola);
+  }
 
   /* portfolio and blog grid */
 

apps/web/src/components/blog/filter-list.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
-import { blogTags } from '@/config/blog';
-import { handleBlogPaginationFilter } from '@/lib/utils/filter-utils';
-
+import Link from 'next/link';
 
 interface FilterListProps {
-  selectedValue: string;
-  setSelectedValue: React.Dispatch<React.SetStateAction<string>>;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  selectedTag: string;
+  blogTags: string[];
 }
 
-const FilterList: React.FC<FilterListProps> = ({ selectedValue, setSelectedValue, setCurrentPage }) => {
+const FilterList: React.FC<FilterListProps> = ({ 
+  selectedTag,
+  blogTags
+}) => {
 
   return (
     <ul className="filter-list">
       {blogTags.map((tag, index) => (
         <li className="filter-item" key={index}>
-          <button
-            className={`filter-btn ${selectedValue === tag ? 'active' : ''}`}
-            onClick={() => handleBlogPaginationFilter(tag, setSelectedValue, setCurrentPage)}
+          <Link
+            href={`/blog?tag=${encodeURIComponent(tag || '')}`}
+            className={`filter-btn ${selectedTag === tag ? 'active' : ''}`}
           >
             {tag}
-          </button>
+          </Link>
         </li>
       ))}
     </ul>

apps/web/src/components/blog/filter-select-box.tsx

@@ -1,23 +1,19 @@
-import React from 'react';
+"use client";
+
+import React, { useState } from 'react';
 import { MdExpandMore } from 'react-icons/md';
-import { blogTags } from '@/config/blog';
-import { handleBlogPaginationFilter } from '@/lib/utils/filter-utils';
+import Link from 'next/link';
 
 interface FilterSelectBoxProps {
-  selectedValue: string;
-  setSelectedValue: React.Dispatch<React.SetStateAction<string>>;
-  isSelectActive: boolean;
-  setIsSelectActive: React.Dispatch<React.SetStateAction<boolean>>;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  selectedTag: string;
+  blogTags: string[];
 }
 
 const FilterSelectBox: React.FC<FilterSelectBoxProps> = ({
-  selectedValue,
-  setSelectedValue,
-  isSelectActive,
-  setIsSelectActive,
-  setCurrentPage
+  selectedTag,
+  blogTags
 }) => {
+  const [isSelectActive, setIsSelectActive] = useState(false);
 
   return (
     <div className="filter-select-box">
@@ -26,7 +22,7 @@ const FilterSelectBox: React.FC<FilterSelectBoxProps> = ({
         onClick={() => setIsSelectActive(!isSelectActive)}
       >
         <div className="select-value">
-          {selectedValue || 'Select category'}
+          {selectedTag || 'Select category'}
         </div>
         <div className="select-icon">
           <MdExpandMore />
@@ -36,8 +32,14 @@ const FilterSelectBox: React.FC<FilterSelectBoxProps> = ({
         <ul className="select-list">
           {blogTags.map((tag: string) => (
             <li className="select-item" key={tag}>
-              <button onClick={() => handleBlogPaginationFilter(tag, setSelectedValue, setCurrentPage)}>
-                {tag}
+              <button
+                onClick={() => {
+                  setIsSelectActive(false);
+                }}
+              >
+                <Link href={`/blog?tag=${encodeURIComponent(tag || '')}`}>
+                  {tag}
+                </Link>
               </button>
             </li>
           ))}
@@ -47,4 +49,4 @@ const FilterSelectBox: React.FC<FilterSelectBoxProps> = ({
   );
 };
 
-export default FilterSelectBox;
+export default FilterSelectBox;