Add announcement list page and enhance post retrieval functionality (#97

) * 🐛 アナウンス一覧ページを追加し、ホームページで最近の投稿を取得するように変更 * 🐛 PostPagePropsのparams型をPromiseに変更 * 🐛 PostListコンポーネントにボタン無効化オプションを追加
UniPro-tech · Dec 21, 2024 · 4120705 · 4120705
1 parent b3002fd
commit 4120705
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/src/app/announce/page.tsx b/src/app/announce/page.tsx
@@ -35,7 +35,7 @@ const ContactsPage: NextPage = () => {
             <p className="text-lg">
                 お知らせ一覧です。
             </p>
-            <PostList dirname="announce" posts={posts} className="lg:w-2/5 w-4/5 mx-auto mt-10"/>
+            <PostList dirname="announce" posts={posts} className="lg:w-2/5 w-4/5 mx-auto mt-10" btnDisabled={true} />
         </main>
     );
 };

diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
@@ -29,26 +29,29 @@ type PostListProps = {
     className?: string;
     listClassName?: string;
     btnClassName?: string;
+    btnDisabled?: boolean;
 };
 
-const PostList = ({ dirname, posts, className, btnClassName, listClassName }: PostListProps) => {
+const PostList = ({ dirname, posts, className, btnClassName, listClassName, btnDisabled = false }: PostListProps) => {
     return (
         <div className={`${className} flex flex-col items-center space-y-3 lg:space-y-0`}>
             <div className={`flex flex-col items-center space-y-1 lg:flex-grow w-full divide-y divide-y-3 divide-gray-400 ${listClassName}`}>
                 {posts.map((post) => (
-                        <PostCard
-                            dirname={dirname}
-                            key={post.slug}
-                            slug={post.slug}
-                            title={post.title}
-                            date={post.date.toLocaleDateString()}
-                            description={post.description}
-                        />
+                    <PostCard
+                        dirname={dirname}
+                        key={post.slug}
+                        slug={post.slug}
+                        title={post.title}
+                        date={post.date.toLocaleDateString()}
+                        description={post.description}
+                    />
                 ))}
             </div>
-            <Button<'Link'> href="/announce" disabled={false} className={btnClassName}>
-                一覧を見る
-            </Button>
+            {btnClassName && (
+                <Button<'button'> href={`/${dirname}`} disabled={btnDisabled} className={btnClassName}>
+                    もっと見る
+                </Button>
+            )}
         </div>
     );
 };