Merge pull request #49 from CAFECA-IO/feature/20230302_julian

Feature/20230302 julian
CAFECA-IO · Mar 2, 2023 · 15aad90 · 15aad90
2 parents 763dc3f + 3730a84
commit 15aad90
Show file tree

Hide file tree

Showing 41 changed files with 1,327 additions and 450 deletions.
diff --git a/package.json b/package.json
@@ -17,11 +17,13 @@
     "eslint-config-next": "13.1.6",
     "i18next": "^22.4.9",
     "lottie-web": "^5.10.2",
+    "moment": "^2.29.4",
     "next": "13.1.6",
     "next-i18next": "^13.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^12.1.5",
+    "react-markdown": "^8.0.5",
     "swr": "^2.0.3",
     "typescript": "4.9.5"
   }

diff --git a/public/img/mask_group2.png b/public/img/mask_group2.png
diff --git a/public/img/[email protected] b/public/img/[email protected]
diff --git a/src/components/about/usecase_items.tsx b/src/components/about/usecase_items.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { useTranslation } from "next-i18next";
 import myStyles from "@/styles/about.module.css";
 
@@ -12,7 +12,7 @@ function UseCaseItems({ title, description, image }: IUsecaseParams) {
   const { t } = useTranslation("common");
 
   const useDescrip = description;
-  const useImg = t(image); //image .svg
+  const useImg = t(image);
 
   const useDescripList = useDescrip.map((v) => {
     return <p key={v}>{t(v)}</p>;
@@ -25,7 +25,7 @@ function UseCaseItems({ title, description, image }: IUsecaseParams) {
         {useDescripList}
       </div>
       <div className={myStyles.useitem_imgbox}>
-        <Image src={useImg} alt={title} width={400} height={400} />
+        <Image src={useImg} alt={title} layout="fill" objectFit="contain" />
       </div>
     </div>
   );

diff --git a/src/components/about/usecase_list.tsx b/src/components/about/usecase_list.tsx
@@ -1,14 +1,14 @@
 import myStyles from "@/styles/about.module.css";
 import UseCaseItems from "./usecase_items";
-import { getUseCaseData } from "../../../contents";
+import { getUseCaseData } from "@/constants/config";
 
 function UseCaseList() {
   const useData = getUseCaseData();
 
   const useList = useData.map((v) => {
     return (
       <UseCaseItems
-        key={v.title}
+        key={v.id}
         title={v.title}
         description={v.description}
         image={v.image}

diff --git a/src/components/common/contact_us_form.tsx b/src/components/common/contact_us_form.tsx
@@ -1,19 +1,14 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { useTranslation } from "next-i18next";
-import myStyles from "@/styles/Home.module.css";
+import myStyles from "@/styles/contact.module.css";
 
 function ContactUsForm() {
   const { t } = useTranslation("common");
 
   return (
     <div className={myStyles.contact_container}>
       <div className={myStyles.contact_imgbox}>
-        <Image
-          alt="contact_us"
-          src="/img/contact.svg"
-          width={400}
-          height={400}
-        />
+        <Image alt="contact_us" src="/img/contact.svg" layout="fill" />
       </div>
       <form className={myStyles.contact_formPart}>
         <input
@@ -36,7 +31,7 @@ function ContactUsForm() {
         ></input>
         <textarea
           id="message"
-          rows={5}
+          rows={7}
           wrap="soft"
           placeholder={`${t("contactForm.message")}`}
           required

diff --git a/src/components/common/footer.tsx b/src/components/common/footer.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import myStyles from "@/styles/footer.module.css";
-//import { getPageIndex } from "../../../contents";
+//import { getPageIndex } from "@/constants/config";
 
 function Footer() {
   const { t } = useTranslation("common");
@@ -22,13 +22,13 @@ function Footer() {
     <div className={myStyles.footer_link_list}>
       <div className={myStyles.footer_link_item}>
         <h4>{t("nav.about")}</h4>
-        <Link href="/about_bolt#whyBolt" scroll={false}>
+        <Link href="/about_bolt#whyBolt">
           <p>{t("about.whyBolt.title")}</p>
         </Link>
-        <Link href="/about_bolt#useCase" scroll={false}>
+        <Link href="/about_bolt#useCase">
           <p>{t("about.useCase.title")}</p>
         </Link>
-        <Link href="/about_bolt#news" scroll={false}>
+        <Link href="/about_bolt#news">
           <p>{t("about.news.title")}</p>
         </Link>
       </div>
@@ -48,21 +48,21 @@ function Footer() {
 
       <div className={myStyles.footer_link_item}>
         <h4>{t("nav.faq")}</h4>
-        <Link href="/faq#" scroll={false}>
+        <Link href="/faq#topics" scroll={false}>
           <p>{t("FAQ.title")}</p>
         </Link>
       </div>
 
       <div className={myStyles.footer_link_item}>
         <h4>{t("nav.contactUs")}</h4>
-        <Link href="/#contact_us">
+        <Link href="/#contact_us" scroll={false}>
           <p>{t("contactForm.title")}</p>
         </Link>
       </div>
 
       <div className={myStyles.footer_link_item}>
         <h4>{t("nav.privacy")}</h4>
-        <Link href="/privacy_policy">
+        <Link href="/privacy_policy#">
           <p>{t("privacy.title")}</p>
         </Link>
       </div>

diff --git a/src/components/common/i18n.tsx b/src/components/common/i18n.tsx
@@ -1,10 +1,12 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import Image from "next/image";
 import myStyles from "@/styles/navbar.module.css";
 
 function I18n() {
+  const { t } = useTranslation("common");
   const router = useRouter();
 
   //選單收合
@@ -16,13 +18,23 @@ function I18n() {
     ? myStyles.langmenu_open
     : myStyles.langmenu_close;
 
+  const textStyles = showSubMenu
+    ? myStyles.lang_text_open
+    : myStyles.lang_text_close;
+
   return (
     <>
       <div className={myStyles.lang_icon_box} onClick={clickHandler}>
         <Image alt="" src="/img/icons/globe.svg" width={44} height={44} />
       </div>
 
+      <div className={textStyles} onClick={clickHandler}>
+        {t("nav.language")}
+      </div>
+
       <div className={subMenuStyles}>
+        <div className={myStyles.lang_backBtn} onClick={clickHandler}></div>
+
         <ul className={myStyles.lang_dropmenu}>
           <li>
             <Link

diff --git a/src/components/common/navbar.tsx b/src/components/common/navbar.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { useTranslation } from "next-i18next";
@@ -19,53 +18,56 @@ function MainNavbar() {
     : myStyles.menu_btn_burger;
 
   return (
-    <>
-      <nav className={myStyles.nav_main_container}>
-        <div>
-          <Link href="/#">
-            <Image
-              alt="bolt_logo"
-              src="/img/bolt_logo_main.svg"
-              width={160}
-              height={45}
-            />
-          </Link>
-        </div>
+    <nav className={myStyles.nav_main_container}>
+      <div className={myStyles.nav_logoArea}>
+        <Link href="/#" onClick={navToggler}>
+          <div className={myStyles.nav_logo}></div>
+        </Link>
 
         <label onClick={navToggler} className={myStyles.menu_btn}>
           <div className={btnStyles}></div>
           <div className={btnStyles}></div>
           <div className={btnStyles}></div>
         </label>
+      </div>
 
-        <div className={`${menuStyles} ${myStyles.nav_list_container}`}>
-          <ul className={myStyles.leftList}>
-            <li>
-              <Link href="/about_bolt">{t("nav.about")}</Link>
-            </li>
-            <li>
-              <Link href="/technology">{t("nav.technology")}</Link>
-            </li>
-            <li>
-              <Link href="/faq">{t("nav.faq")}</Link>
-            </li>
-          </ul>
+      <div className={`${menuStyles} ${myStyles.nav_list_container}`}>
+        <ul className={myStyles.leftList}>
+          <li>
+            <Link href="/about_bolt" onClick={navToggler}>
+              {t("nav.about")}
+            </Link>
+          </li>
+          <li>
+            <Link href="/technology" onClick={navToggler}>
+              {t("nav.technology")}
+            </Link>
+          </li>
+          <li>
+            <Link href="/faq" onClick={navToggler}>
+              {t("nav.faq")}
+            </Link>
+          </li>
+        </ul>
 
-          <span></span>
+        <span></span>
 
-          <ul className={myStyles.rightList}>
-            <li>
-              <I18n />
-            </li>
-            <li>
-              <Link href="" className={myStyles.blockchain_btn}>
-                {t("nav.blockchain")}
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </>
+        <ul className={myStyles.rightList}>
+          <li>
+            <I18n />
+          </li>
+          <li>
+            <Link
+              href=""
+              className={myStyles.blockchain_btn}
+              onClick={navToggler}
+            >
+              {t("nav.blockchain")}
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
   );
 }
 export default MainNavbar;
diff --git a/src/components/common/news_items.tsx b/src/components/common/news_items.tsx
@@ -1,42 +1,44 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
+import moment from "moment";
 
 interface INewsItemsParams {
   id: string;
   title: string;
-  date: string;
+  timestamp: number;
   thumbnail: string;
-  contents: string;
+  contents: string[];
   styles: { [key: string]: string };
 }
 
 function NewsItems({
   id,
   title,
-  date,
+  timestamp,
   thumbnail,
   contents,
   styles,
 }: INewsItemsParams) {
   const { t } = useTranslation("common");
 
   const newsLink = `/news/${id}`;
-  const localeDate = new Date(date).toLocaleDateString("zh-TW");
+  const localeDate = moment(timestamp).format("YYYY.MM.DD");
   const newsImg = t(thumbnail);
+  const showContents = contents.slice(1, 5);
 
   return (
     <>
       <Link href="/news/[newsId]" as={newsLink}>
         <div className={styles.newsitem_ticket}>
           <div className={styles.newsitem_imgbox}>
-            <Image alt={title} src={newsImg} width={320} height={240} />
+            <Image alt={title} src={newsImg} layout="fill" objectFit="cover" />
           </div>
           <div className={styles.newsitem_textbox}>
             <h3>{t(title)}</h3>
             <time>{localeDate}</time>
             <div className={styles.newsitem_contentbox}>
-              <p>{t(contents)}</p>
+              <p>{showContents}</p>
             </div>
           </div>
         </div>

diff --git a/src/components/common/news_list.tsx b/src/components/common/news_list.tsx
@@ -1,27 +1,31 @@
 import NewsItems from "./news_items";
-import { getAllNews } from "@/interfaces/news_detail";
+import { INewsDetail } from "@/interfaces/news_detail";
 
-function NewsList(props: { styles: { [key: string]: string }; max: number }) {
-  const newsData = getAllNews();
+function NewsList(props: {
+  newsData: INewsDetail[];
+  styles: { [key: string]: string };
+}) {
+  const { newsData, styles } = props;
 
-  const { styles, max } = props;
-  if (max > 6) {
-    newsData.splice(4);
-  }
-
-  const newsList = newsData.map((v) => {
-    return (
-      <NewsItems
-        key={v.id}
-        id={v.id}
-        title={v.title}
-        date={v.date}
-        thumbnail={v.thumbnail}
-        contents={v.contents}
-        styles={styles}
-      />
-    );
-  });
+  const newsList = newsData ? (
+    newsData.map((v) => {
+      return (
+        <NewsItems
+          key={v.id}
+          id={v.id}
+          title={v.title}
+          timestamp={v.timestamp}
+          thumbnail={v.thumbnail}
+          contents={v.contents}
+          styles={styles}
+        />
+      );
+    })
+  ) : (
+    <div>
+      <h1>無法載入最新消息，請稍後再試</h1>
+    </div>
+  );
 
   return <div className={styles.newslist_container}>{newsList}</div>;
 }