Merge pull request #32 from CAFECA-IO/feature/20230220_julian

Feature/20230220 julian

src/components/common/news_items.tsx

@@ -2,32 +2,35 @@ 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;
   title: string;
   date: string;
-  image: string;
+  thumbnail: string;
   contents: string;
 }) {
   const { t } = useTranslation("common");
 
   const newsLink = `/news/${props.id}`;
-  //const localeDate = new Date(props.date).toLocaleDateString("zh-TW");
-  const newsImg = t(`${props.image}`);
+  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,25 +1,27 @@
-import myStyles from "@/styles/about.module.css";
 import NewsItems from "./news_items";
-import { dummyNewsData } from "@/interfaces/news_detail";
+import { getAllNews } from "@/interfaces/news_detail";
+import myStyles from "@/styles/about.module.css";
+import newsStyles from "@/styles/news.module.css";
 
-function NewsList(max = 4) {
-  const newsData = dummyNewsData;
-  if (max > 6) {
+function NewsList(props: { max: number }) {
+  const newsData = getAllNews();
+  if (props.max > 6) {
     newsData.splice(4);
   }
+
   const newsList = newsData.map((v) => {
     return (
       <NewsItems
         key={v.id}
         id={v.id}
         title={v.title}
         date={v.date}
-        image={v.image}
+        thumbnail={v.thumbnail}
         contents={v.contents}
       />
     );
   });
 
-  return <div className={myStyles.newslist_container}>{newsList}</div>;
+  return <div className={newsStyles.newslist_container}>{newsList}</div>;
 }
 export default NewsList;

src/components/faq/faqItems.tsx

@@ -2,7 +2,11 @@ import { useState } from "react";
 import { useTranslation } from "next-i18next";
 import myStyles from "@/styles/faq.module.css";
 
-function FAQItems(props: { question: string; answer: string }) {
+function FAQItems(props: {
+  question: string;
+  answer: string;
+  //faqStyle: string;
+}) {
   const { t } = useTranslation("common");
 
   const [showAns, setShowAns] = useState(false);

src/components/news/newsBody.tsx

@@ -0,0 +1,38 @@
+import Image from "next/legacy/image";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+import myStyles from "@/styles/news.module.css";
+
+function NewsBody(props: {
+  title: string;
+  date: string;
+  image: string;
+  contents: string;
+}) {
+  const { t } = useTranslation("common");
+
+  return (
+    <div className={myStyles.news_body_container}>
+      <div className={myStyles.news_body_imgbox}>
+        <Image
+          src={props.image}
+          alt={props.title}
+          layout="fill"
+          objectFit="cover"
+        />
+      </div>
+      <div className={myStyles.news_body_textbox}>
+        <h1>{props.title}</h1>
+        <time>{props.date}</time>
+        <div className={myStyles.news_contents}>
+          <p>{props.contents}</p>
+        </div>
+      </div>
+      <Link href="/news" className={myStyles.goBackBtn}>
+        <button>{t("news.goBack")}</button>
+      </Link>
+    </div>
+  );
+}
+
+export default NewsBody;

src/components/techology/techologyItems.tsx

@@ -17,8 +17,8 @@ function TechnologyItems(props: {
         <Image
           src={props.image}
           alt={t(`${props.title}`)}
-          width={500}
-          height={500}
+          width={400}
+          height={400}
         />
       </div>
       <div className={myStyles.tech_item_textbox}>

src/interfaces/news_detail.ts

@@ -2,6 +2,7 @@ export interface INewsDetail {
   id: string;
   title: string;
   date: string;
+  thumbnail: string; //縮圖
   image: string;
   contents: string;
 }
@@ -10,56 +11,72 @@ export const dummyNewsData: INewsDetail[] = [
   {
     id: "n001",
     title: "News1",
-    date: "2023-2-15",
-    image: "/img/news/Placement Area.png",
+    date: "2023-02-15",
+    thumbnail: "/img/news/Placement Area.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介",
   },
   {
     id: "n002",
     title: "News2",
-    date: "2023-2-1",
-    image: "/img/news/Placement Area2.png",
+    date: "2023-02-01",
+    thumbnail: "/img/news/Placement Area2.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "起一個班種臺，科一電。眼員圖、學多約全是今相到知候健，出小而候現傳確持在試入球受公詩步於……卻常說車進兒交看這病據因門工是事自了拉，門媽說帶上山。陽空前教樂，人運教在了高居吸開行一完學，導訴怎上了，前相年酒演音生不不雖男數中的票分數心形能格人引實修。",
   },
   {
     id: "n003",
     title: "News3",
-    date: "2023-1-1",
-    image: "/img/news/Placement Area3.png",
+    date: "2023-01-01",
+    thumbnail: "/img/news/Placement Area3.png",
+    image: "/img/news/Placement [email protected]",
     contents: "新年快樂。",
   },
   {
     id: "n004",
     title: "News4",
     date: "2022-12-14",
-    image: "/img/news/Placement Area4.png",
+    thumbnail: "/img/news/Placement Area4.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "公臺足健北知天大天生，和生法；代排近全。刻施顧：果本年長認子畫好之屋以從門家雙院品立禮小小熱星國的空沒而麗看色客文能定。再的雖電出也大後，非未中級小案：屋事雙大，大力放業。己怕不，手是因看適是體；過後樂要試以個害共自間行法民數女想；高雄落不紅許怕物聽異是為境在決玩個媽報開室致羅商這人權的再麼奇喜體是活接空法銀千了笑面業！多主一選有……義線習孩未到爾些可、指愛象黨計料樣，直早先，步於間大力然大。裡我印賽此是山留但數們好變合個之似為兩部子學上班地陽，辦員待色想人望朋民空之口。早親有牛位奇說那；起學為導境。師動該平及費統業服本我家怎出個一、一資好的機遊來大兩精，不主不主三理詩引的組氣兩電，的金小狀回果一是長紀那的上八第面，了間了頭原的哥少遠年專安間一過，響開了年！什會運。防重題地考直年有中登基和。標及體公了金熱其品現不市充學士的風本清一於那用門車思列一創師我坐時之進總。上電們馬的，哥計氣無做我下屋。",
   },
   {
     id: "n005",
     title: "News5",
     date: "2022-11-11",
-    image: "/img/news/Placement Area.png",
+    thumbnail: "/img/news/Placement Area.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "量山己他分開節文。人外雖麼這旅德他就；為紅類是覺……我流內不為金防：維女兒沒讓於，地言車日待灣需資大黨空要人縣過間……主要備作我良是會病護。遊園走這成方星了，件告然生期計狀……導價。",
   },
   {
     id: "n006",
     title: "News6",
     date: "2022-10-30",
-    image: "/img/news/Placement Area4.png",
+    thumbnail: "/img/news/Placement Area4.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "而且不犯的而我覺親友，樣的繼續狀況我就很，不喜歡只有的目標大的習慣男性⋯我沒好可愛什麼有，一大我們在⋯就想不好的看加上店機前好像到一？了想⋯真的之類的，家的感覺然還是找不就⋯太的不重要也想聲天下想像中願意，美麗拿到的聲：的他搞的裡有如果第一次。是一吸引望了，是兩個，麼也沒無法覺得很，成沒每次要的自⋯預告還是有天可以知道，的工作了不少，多多指前陣子果是，天下間完全不，要一真是太沒有被為，想到的看看出來每次還。",
   },
   {
     id: "n007",
     title: "News7",
     date: "2022-10-26",
-    image: "/img/news/Placement Area3.png",
+    thumbnail: "/img/news/Placement Area3.png",
+    image: "/img/news/Placement [email protected]",
     contents:
       "能媽說上表離作我；年向幾驗太受……覺友燈那活本其識！只車大要會在仍花念年被深善領行畫示國子主二麼現資施！",
   },
 ];
+
+export function getAllNews() {
+  return dummyNewsData;
+}
+
+export function getNewsById(id: string) {
+  const news = dummyNewsData.find((news) => news.id === id);
+  return news || dummyNewsData[0];
+}

src/locales/en/common.json

@@ -95,6 +95,11 @@
     "question4": "如何下載安裝 Bolt？",
     "answer4": "詳細內容放置於此"
   },
+  "news": {
+    "title": "News",
+    "seeMore": "See More",
+    "goBack": "Go Back"
+  },
   "contactForm": {
     "title": "Contact Us",
     "name": "Name",

src/locales/zh-TW/common.json

@@ -95,6 +95,11 @@
     "question4": "如何下載安裝 Bolt？",
     "answer4": "詳細內容放置於此"
   },
+  "news": {
+    "title": "最新消息",
+    "seeMore": "更多文章",
+    "goBack": "返回上頁"
+  },
   "contactForm": {
     "title": "聯絡我們",
     "name": "姓名",

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/faq.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import myStyles from "@/styles/faq.module.css";
@@ -7,9 +8,22 @@ import { getFaqData } from "contents";
 function FAQPage() {
   const { t } = useTranslation("common");
 
+  //const [showAnsIndex, setShowAnsIndex] = useState(null);
+  //const clickHandler = () => setShowAnsIndex();
+
+  //const faqBlockStyles = showAns ? myStyles.faq_showAns : myStyles.faq_hideAns;
+  //const answerTextStyles = showAns ? myStyles.showAnswer : myStyles.hideAnswer;
+
   const faqData = getFaqData();
   const faqList = faqData.map((v) => {
-    return <FAQItems question={v.question} answer={v.answer} />;
+    return (
+      <FAQItems
+        key={v.id}
+        question={v.question}
+        answer={v.answer}
+        //faqStyle={answerTextStyles}
+      />
+    );
   });
 
   return (

src/pages/news/[newsId].tsx

@@ -1,9 +1,48 @@
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { getNewsById } from "@/interfaces/news_detail";
+import myStyles from "@/styles/news.module.css";
+import NewsBody from "@/components/news/newsBody";
 
 function NewsDetailPage() {
+  const { t } = useTranslation("common");
+
   const router = useRouter();
   const { newsId } = router.query;
 
-  return <p style={{ padding: "6rem" }}>Post: {newsId}</p>;
+  if (!newsId) {
+    return <></>;
+  }
+
+  const news = getNewsById(newsId as string);
+
+  return (
+    <div className={myStyles.news_detail_container}>
+      <NewsBody
+        title={news.title}
+        date={news.date}
+        image={news.image}
+        contents={news.contents}
+      />
+    </div>
+  );
 }
+
 export default NewsDetailPage;
+
+export const getStaticPaths = async () => {
+  return {
+    paths: [{ params: { newsId: "" } }],
+    fallback: true,
+  };
+};
+
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["common"])),
+      // Will be passed to the page component as props
+    },
+  };
+}

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={0} />
     </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/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;
 }