Merge branch 'dev'

Author: The-Infinitys

src/app/[article_year]/[month]/[aid]/page.css

@@ -7,6 +7,8 @@ html {
 .article-container {
   display: flex;
   gap: 20px;
+  align-items: flex-start;
+  justify-content: center;
   flex-wrap: wrap;
   overflow-x: hidden auto;
   min-height: 100vh;
@@ -244,9 +246,13 @@ html {
 }
 
 .other-articles {
+  align-items: center;
+  justify-content: center;
   margin-top: 40px;
   top: 20px;
   max-width: 250px;
+  margin-left: 0 auto;
+  margin-right: 0 auto;
   background-color: transparent;
   /* スクロール時に追従 */
 }
@@ -296,6 +302,10 @@ html {
   .other-articles {
     position: relative;
     /* stickyを無効化 */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     max-width: 90vw;
     margin: 0 auto;
     top: auto;
@@ -305,6 +315,7 @@ html {
 
   .other-articles .article-link {
     width: 90%;
+    margin: 0 auto;
   }
 
   .article-content {

src/app/article/components/list.tsx

@@ -1,20 +1,71 @@
 "use client";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { generateArticleButton, Article } from "../article-client";
-import { useLocale } from "@/app/i18nProvider";
+import { useTranslations } from "next-intl";
 
 interface ArticleListProps {
   articles: Article[];
 }
 
 export default function ArticleList({ articles }: ArticleListProps) {
-  const locale = useLocale();
-  const filteredArticles = articles.filter((a) => a.lang === locale);
+  const t = useTranslations();
+  const locale = t("info.lang");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const articlesPerPage = 8;
+
+  // 検索とフィルタリング
+  const filteredArticles = articles
+    .filter((a) => a.lang === locale)
+    .filter((a) =>
+      a.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+  // ページネーション用の計算
+  const totalPages = Math.ceil(filteredArticles.length / articlesPerPage);
+  const startIndex = (currentPage - 1) * articlesPerPage;
+  const currentArticles = filteredArticles.slice(
+    startIndex,
+    startIndex + articlesPerPage
+  );
+
+  // ページ変更ハンドラー
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+    }
+  };
+
   return (
     <section className="articles">
-      {filteredArticles.map(
+      <input
+        type="text"
+        placeholder="Search articles..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="search-input"
+      />
+      {currentArticles.map(
         (article: Article): ReactNode => generateArticleButton(article)
       )}
+      <div className="pagination">
+        <button
+          onClick={() => handlePageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          {t("pages.article.words.previous")}
+        </button>
+        <span>
+          Page {currentPage} of {totalPages}
+        </span>
+        <button
+          onClick={() => handlePageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          {t("pages.article.words.next")}
+        </button>
+      </div>
     </section>
   );
 }

src/i18n/en/common.json

@@ -21,7 +21,9 @@
         "msg2": "I write about various topics, so please take a look!"
       },
       "words": {
-        "search": "Search"
+        "search": "Search",
+        "previous":"Previous",
+        "next":"Next"
       },
       "content": {
         "words": {

src/i18n/ja/common.json

@@ -21,7 +21,9 @@
         "msg2": "色々書いているので是非見てください！"
       },
       "words": {
-        "search": "検索"
+        "search": "検索",
+        "previous":"前へ",
+        "next":"次へ"
       },
       "content":{
         "words":{