Develop news page style

src/components/common/news_items.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import myStyles from "@/styles/about.module.css";
+import newsStyles from "@/styles/news.module.css";
 
 function NewsItems(props: {
   id: string;
@@ -13,21 +14,23 @@ function NewsItems(props: {
   const { t } = useTranslation("common");
 
   const newsLink = `/news/${props.id}`;
-  //const localeDate = new Date(props.date).toLocaleDateString("zh-TW");
+  const localeDate = new Date(props.date).toLocaleDateString("zh-TW");
   const newsImg = t(`${props.thumbnail}`);
 
   //todo: Link url.format
   return (
     <div>
       <Link href="/news/[newsId]" as={newsLink}>
-        <div className={myStyles.newsitem_ticket}>
-          <div className={myStyles.newsitem_imgbox}>
+        <div className={newsStyles.newsitem_ticket}>
+          <div className={newsStyles.newsitem_imgbox}>
             <Image alt="news1" src={newsImg} width={320} height={240} />
           </div>
-          <h3>{t(`${props.title}`)}</h3>
-          <time>{props.date}</time>
-          <div className={myStyles.newsitem_contentbox}>
-            <p>{t(`${props.contents}`)}</p>
+          <div className={newsStyles.newsitem_textbox}>
+            <h3>{t(`${props.title}`)}</h3>
+            <time>{localeDate}</time>
+            <div className={newsStyles.newsitem_contentbox}>
+              <p>{t(`${props.contents}`)}</p>
+            </div>
           </div>
         </div>
       </Link>

src/components/common/news_list.tsx

@@ -1,6 +1,7 @@
-import myStyles from "@/styles/about.module.css";
 import NewsItems from "./news_items";
 import { getAllNews } from "@/interfaces/news_detail";
+import myStyles from "@/styles/about.module.css";
+import newsStyles from "@/styles/news.module.css";
 
 function NewsList(props: { max: number }) {
   const newsData = getAllNews();
@@ -21,6 +22,6 @@ function NewsList(props: { max: number }) {
     );
   });
 
-  return <div className={myStyles.newslist_container}>{newsList}</div>;
+  return <div className={newsStyles.newslist_container}>{newsList}</div>;
 }
 export default NewsList;

src/interfaces/news_detail.ts

@@ -11,7 +11,7 @@ export const dummyNewsData: INewsDetail[] = [
   {
     id: "n001",
     title: "News1",
-    date: "2023-2-15",
+    date: "2023-02-15",
     thumbnail: "/img/news/Placement Area.png",
     image: "/img/news/Placement [email protected]",
     contents:
@@ -20,7 +20,7 @@ export const dummyNewsData: INewsDetail[] = [
   {
     id: "n002",
     title: "News2",
-    date: "2023-2-1",
+    date: "2023-02-01",
     thumbnail: "/img/news/Placement Area2.png",
     image: "/img/news/Placement [email protected]",
     contents:
@@ -29,7 +29,7 @@ export const dummyNewsData: INewsDetail[] = [
   {
     id: "n003",
     title: "News3",
-    date: "2023-1-1",
+    date: "2023-01-01",
     thumbnail: "/img/news/Placement Area3.png",
     image: "/img/news/Placement [email protected]",
     contents: "新年快樂。",

src/pages/about_bolt.tsx

@@ -21,7 +21,7 @@ function AboutBoltPage() {
       </div>
       <div id="news" className={myStyles.about_block3}>
         <h1>{t("about.news.title")}</h1>
-        <NewsList />
+        <NewsList max={4} />
         <Link href="/news" className={myStyles.newslist_link}>
           查看更多
         </Link>

src/pages/news/index.tsx

@@ -12,7 +12,7 @@ function AllNewsPage() {
         <h1>{t("news.title")}</h1>
       </div>
 
-      <NewsList max={Infinity} />
+      <NewsList max={0} />
     </div>
   );
 }

src/styles/about.module.css

@@ -117,12 +117,18 @@
   align-items: center;
 }
 
-.newsitem_ticket h3 {
+.newsitem_textbox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.newsitem_textbox h3 {
   font: normal normal normal 28px/45px Noto Sans TC;
   margin: 0.5rem;
 }
 
-.newsitem_ticket time,
+.newsitem_textbox time,
 .newsitem_contentbox p {
   font: normal normal normal 14px/23px Noto Sans TC;
 }

src/styles/news.module.css

@@ -94,6 +94,57 @@
   color: #31d3f5;
 }
 
+/* news list */
+.newslist_container {
+  padding: 5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* news items */
+.newsitem_ticket {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.newsitem_imgbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.newsitem_textbox {
+  width: 100%;
+  margin-left: 3rem;
+  color: #3a3b4d;
+}
+
+.newsitem_textbox h3 {
+  font: normal normal normal 28px/45px Noto Sans TC;
+}
+
+.newsitem_textbox time,
+.newsitem_contentbox p {
+  font: normal normal normal 14px/23px Barlow;
+}
+
+.newsitem_textbox time {
+  float: right;
+}
+
+.newsitem_contentbox p {
+  padding-right: 3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
 /* 螢幕寬度小於 992px 時 */
 @media screen and (max-width: 992px) {
 }