fix: build errors

src/app/projects/page.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import { ProjectCard } from '@/components/ProjectCard'
 import projectsData from '../../../public/projects.json'
-import { projectsSchema, Project } from '@/typings/project'
+import { projectsSchema, Project, Tag } from '@/typings/project'
 import { useInView } from 'react-intersection-observer'
 
 const Page = () => {
@@ -18,7 +18,7 @@ const Page = () => {
 
   const [currentPage, setCurrentPage] = useState(1)
   const [itemsPerPage] = useState<number>(12)
-  const [filterTag, setFilterTag] = useState<string | null>(null)
+  const [filterTag, setFilterTag] = useState<Tag | null>(null)
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
 
   const { ref, inView } = useInView({
@@ -26,7 +26,9 @@ const Page = () => {
   })
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setFilterTag(event.target.value === 'All' ? null : event.target.value)
+    setFilterTag(
+      event.target.value === 'All' ? null : (event.target.value as Tag)
+    )
     setCurrentPage(1)
   }
 
@@ -72,11 +74,13 @@ const Page = () => {
           className="rounded border border-gray-300 bg-white p-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
         >
           <option value="All">All Tags</option>
-          {[...new Set(projects.flatMap(project => project.tags))].map(tag => (
+          {Array.from(new Set(projects.flatMap(project => project.tags))).map(
-            <option key={tag} value={tag}>
+            tag => (
-              {tag}
+              <option key={tag} value={tag}>
-            </option>
+                {tag}
-          ))}
+              </option>
+            )
+          )}
         </select>
         <select
           onChange={handleSortChange}