Develop news page

src/components/common/news_list.tsx

@@ -2,9 +2,9 @@ import myStyles from "@/styles/about.module.css";
 import NewsItems from "./news_items";
 import { getAllNews } from "@/interfaces/news_detail";
 
-function NewsList(max = 4) {
+function NewsList(props: { max: number }) {
   const newsData = getAllNews();
-  if (max > 6) {
+  if (props.max > 6) {
     newsData.splice(4);
   }
 

src/components/news/newsBody.tsx

@@ -28,9 +28,9 @@ function NewsBody(props: {
           <p>{props.contents}</p>
         </div>
       </div>
-      <button>
-        <Link href="/news">{t("news.goBack")}</Link>
-      </button>
+      <Link href="/news" className={myStyles.goBackBtn}>
+        <button>{t("news.goBack")}</button>
+      </Link>
     </div>
   );
 }

src/pages/news/[newsId].tsx

@@ -18,7 +18,7 @@ function NewsDetailPage() {
   const news = getNewsById(newsId as string);
 
   return (
-    <div className={myStyles.news_main_container}>
+    <div className={myStyles.news_detail_container}>
       <NewsBody
         title={news.title}
         date={news.date}

src/pages/news/index.tsx

@@ -1,8 +1,28 @@
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import NewsList from "@/components/common/news_list";
+import myStyles from "@/styles/news.module.css";
+
 function AllNewsPage() {
+  const { t } = useTranslation("common");
+
   return (
-    <div style={{ padding: "20rem" }}>
-      <h1>This is All news page</h1>
+    <div className={myStyles.news_main_container}>
+      <div className={myStyles.news_main_banner}>
+        <h1>{t("news.title")}</h1>
+      </div>
+
+      <NewsList max={Infinity} />
     </div>
   );
 }
 export default AllNewsPage;
+
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["common"])),
+      // Will be passed to the page component as props
+    },
+  };
+}

src/styles/news.module.css

@@ -1,4 +1,30 @@
+/* all news */
 .news_main_container {
+  padding: 5rem 0 6rem 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8fafa;
+  color: #3a3b4d;
+}
+
+.news_main_banner {
+  width: 100%;
+  height: 450px;
+  background: url("/img/newsPage_banner.png") no-repeat top center / cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.news_main_banner h1 {
+  font: normal normal 36px/58px Noto Sans TC;
+}
+
+/* news detail */
+.news_detail_container {
   padding: 10rem 6rem 6rem 6rem;
   min-height: 100vh;
   display: flex;
@@ -50,7 +76,7 @@
   text-align: left;
 }
 
-.news_body_container button {
+.goBackBtn button {
   padding: 10px;
   width: 120px;
   background-color: #31d3f5;
@@ -59,10 +85,11 @@
   color: #3a3b4d;
   font: normal normal 18px/26px Noto Sans TC;
   letter-spacing: 0.09px;
+  cursor: pointer;
   transition: all 0.1s ease-in;
 }
 
-.news_body_container button:hover {
+.goBackBtn button:hover {
   background-color: transparent;
   color: #31d3f5;
 }