#71

frontend/src/pages/posts/PostListPage.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Link, useLocation } from 'react-router-dom'
 
+import PostList from '@/components/PostList'
 import TagSidebar from '@/components/TagSidebar'
 import WikiBody from '@/components/WikiBody'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
@@ -14,10 +15,10 @@ import type { Post, WikiPage } from '@/types'
 
 
 export default () => {
-  const [posts, setPosts] = useState<Post[]> ([])
-  const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
   const [cursor, setCursor] = useState ('')
   const [loading, setLoading] = useState (false)
+  const [posts, setPosts] = useState<Post[]> ([])
+  const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
 
   const loaderRef = useRef<HTMLDivElement | null> (null)
 
@@ -25,7 +26,7 @@ export default () => {
     setLoading (true)
     const res = await axios.get (`${ API_BASE_URL }/posts`, {
 	params: { tags:   tags.join (' '),
-		  match:  (anyFlg ? 'any' : 'all'),
+		  match:  anyFlg ? 'any' : 'all',
 		  ...(withCursor ? { cursor } : { }) } })
     const data = toCamel (res.data as any, { deep: true }) as { posts:      Post[]
 								nextCursor: string }
@@ -92,21 +93,7 @@ export default () => {
 	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length
-	       ? (
-		  <div className="flex flex-wrap gap-6 p-4">
-		    {posts.map ((post, i) => (
-			<Link to={`/posts/${ post.id }`}
-			      key={i}
-			      className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-			  <img src={post.thumbnail || post.thumbnailBase || undefined}
-			       alt={post.title || post.url}
-			       title={post.title || post.url || undefined}
-			       loading="eager"
-			       fetchPriority="high"
-			       decoding="async"
-			       className="object-none w-full h-full" />
-			</Link>))}
-		  </div>)
+	       ? <PostList posts={posts} />
 	       : !(loading) && '広場には何もありませんよ．'}
 	      {loading && 'Loading...'}
 	      <div ref={loaderRef} className="h-12"></div>