💄About

noeypatt · Mar 28, 2020 · abb2dd1 · abb2dd1 · vercel · Mar 28, 2020
1 parent 4ad622c
commit abb2dd1
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 1 deletion.
diff --git a/components/about.js b/components/about.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
+import Link from 'next/link';
 
 const About = () => {
 
@@ -70,7 +71,10 @@ const About = () => {
                                     }
                                     <div className="more-content">
                                         <h6>อ่านต่อ</h6>
-                                        <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        <Link href="/index/about">
+                                            <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        </Link>
+
                                     </div>
 
                                 </div>

diff --git a/pages/index/About.js b/pages/index/About.js
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+const About = () => {
+
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [data, setData] = useState([
+        {
+            title: "ระดับเริ่มต้น (Aging society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไปมากกว่าร้อยละ 10 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปีมากกว่าร้อยละ 7 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสมบูรณ์ (Aged society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไป มากกว่าร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปี มากกว่าร้อยละ 14 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสูง (Super-aged society)",
+            text: "สังคมที่มีประชากรอายุ 65 ปีขึ้นไปมากกว่า ร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: ""
+        },
+    ])
+
+    return (
+        <div className="warp-about">
+            <div className="page-content">
+                {
+                    isSmallScreen ?
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
+                                <h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/trstcover2.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                        :
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
+                                <h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/trstcover2.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                    <div className="more-content">
+                                        <h6>อ่านต่อ</h6>
+                                        <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                }
+
+            </div>
+        </div>
+    )
+}
+export default About;