Merge pull request #42 from kaogeek/develop

Search page + หน้าข้อมูลที่เกี่ยวข้อง

src/App.js

@@ -1,4 +1,5 @@
 import { Routes, Route } from "react-router-dom";
+import { useState } from "react";
 
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
@@ -8,16 +9,19 @@ import Chapter from "./pages/Chapter";
 import Discussionist from "./pages/Discussionist";
 import ScrollToTop from "./components/ScrollToTop";
 import Section from "./pages/Section";
+import RelatedInfo from "./pages/RelatedInfo";
 
 export default function App() {
+  const [searchInputValue, setSearchInputValue] = useState('');
   return (
     <div className="App text-white">
-      <Navbar />
+      <Navbar setSearchInputValue={setSearchInputValue} />
       <ScrollToTop />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
-        <Route path="/search" element={<Search />} />
+        <Route path="/related-info" element={<RelatedInfo />} />
+        <Route path="/search" element={<Search searchInputValue={searchInputValue} setSearchInputValue={setSearchInputValue} />} />
         <Route path="/chapter/:name" element={<Chapter />} />
         <Route path="/section/:id" element={<Section />} />
         <Route path="/discussionist/:name" element={<Discussionist />} />

src/components/Navbar.jsx

@@ -2,41 +2,43 @@ import Logo from "./Logo";
 import HamburgerSVG from "./HamburgerSVG";
 import CloseBtnSVG from "./CloseBtnSVG";
 import { Link } from "react-router-dom";
-import { useLocation } from 'react-router-dom';
+import { useLocation } from "react-router-dom";
 import { Icon } from "@iconify/react";
 import React, { useEffect, useRef } from "react";
 
 
-function Navbar() {
+function Navbar({ setSearchInputValue }) {
   const [showMenu, setShowMenu] = React.useState(false);
   const location = useLocation();
   const searchInputRef = useRef(null);
 
   useEffect(() => {
     // Automatically focus the search input when on the search page
-    if (location.pathname === '/search') {
+    if (location.pathname === "/search") {
       searchInputRef.current?.focus();
+      // print out search input value
+      console.log(searchInputRef.current?.value);
     }
   }, [location.pathname]); // Dependency array to re-run effect when pathname changes
 
-
   return (
     <div className="h-16 bg-black" data-testid="navbar">
       <div className="max-w-screen-xl h-full mx-auto px-4 flex justify-between items-center">
-
-
-        {location.pathname === '/search' && (
+        {location.pathname === "/search" && (
           <div className="inline-block">
             <Link to="/" className="text-2xl font-bold text-white sm:hidden">
               <Icon icon="ic:round-arrow-back-ios" />
             </Link>
-            <Link to="/" className="text-2xl font-bold text-white hidden sm:block">
+            <Link
+              to="/"
+              className="text-2xl font-bold text-white hidden sm:block"
+            >
               <Logo />
             </Link>
           </div>
         )}
 
-        {location.pathname === '/search' && (
+        {location.pathname === "/search" && (
           <div className="sm:w-3/5 w-4/5  inline-block text-sm ">
             {/* Replace this with your actual search bar component */}
 
@@ -49,19 +51,17 @@ function Navbar() {
                 name="search-input"
                 className="focus:outline-none w-full"
                 ref={searchInputRef}
+                onChange={(e) => setSearchInputValue(e.target.value)}
               ></input>
             </div>
-
           </div>
-
         )}
 
-        {location.pathname === '/search' && (
-          <div className="inline-block">
-          </div>
+        {location.pathname === "/search" && (
+          <div className="inline-block"></div>
         )}
 
-        {location.pathname !== '/search' && (
+        {location.pathname !== "/search" && (
           <div className="inline-block">
             <Link to="/" className="text-2xl font-bold text-white">
               <Logo />
@@ -70,7 +70,7 @@ function Navbar() {
         )}
 
         {/* Desktop Menu */}
-        {location.pathname !== '/search' && (
+        {location.pathname !== "/search" && (
           <div className="t">
             <div className="hidden xs:flex gap-8">
               <Link
@@ -85,6 +85,12 @@ function Navbar() {
               >
                 เกี่ยวกับโครงการ
               </Link>
+              <Link
+                to="/related-info"
+                className="text-white hover:underline underline-offset-4"
+              >
+                ข้อมูลที่เกี่ยวข้อง
+              </Link>
             </div>
             {/* Mobile Menu */}
             <div className="xs:hidden flex items-center">
@@ -125,6 +131,14 @@ function Navbar() {
                         เกี่ยวกับโครงการ
                       </Link>
                     </div>
+                    <div className="w-auto inline-block">
+                      <Link
+                        to="/related-info"
+                        className="text-white hover:underline underline-offset-4"
+                      >
+                        ข้อมูลที่เกี่ยวข้อง
+                      </Link>
+                    </div>
                   </div>
                 </div>
               )}

src/pages/About.jsx

@@ -3,7 +3,9 @@ import "../components/ProfileImages.jsx";
 import ProfileImages from "../components/ProfileImages.jsx";
 export default function About() {
   return (
-	<>
+
+	<div>
+
     <div data-testid="about">
       <div className="Landing-Page-Banner-PC">
         <div className="max-w-screen-xl mx-auto" >
@@ -115,6 +117,7 @@ export default function About() {
 
 
       </div>
-	</>
+	</div>
+
   );
 }

src/pages/RelatedInfo.jsx

@@ -0,0 +1,60 @@
+const url = "https://kaogeek.github.io";
+
+export default function RelatedInfo() {
+  return (
+    <div data-testid="related-doc">
+      <div className="Landing-Page-Banner-PC">
+        <div className="max-w-screen-xl mx-auto min-h-screen">
+          <h1 className="text-center lg:text-7xl md:text-6xl sm:text-4xl text-3xl font-bold text-white pt-40">
+            ข้อมูลที่เกี่ยวข้อง
+          </h1>
+          <div className="text-center text-lg px-8 flex flex-col gap-8 py-20">
+            <a
+              href={`${url}/pdf/2562_ความมุ่งหมาย_คำอธิบาย_รธน_2560.pdf`}
+              target="_blank"
+              rel="noreferrer"
+              className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              ความมุ่งหมายและคำอธิบายประกอบรายมาตราของรัฐธรรมนูญแห่งราชอาณาจักรไทย
+              พุทธศักราช 2560
+            </a>
+            <a
+              href={`${url}/pdf/2561_ความในใจของคณะกรรมการร่างรัฐธรรมนูญ2560_ส.pdf`}
+              target="_blank"
+              rel="noreferrer"
+              className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              ความในใจของคณะกรรมการร่างรัฐธรรมนูญ 2560
+            </a>
+            <a
+              href={`${url}/pdf/581005_105_240งพิเศษ.pdf`}
+              target="_blank"
+              rel="noreferrer"
+              className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              คำสั่งหัวหน้าคณะรักษาความสงบแห่งชาติ ที่ ๓๔/๒๕๕๘ เรื่อง
+              การอำนวยความสะดวกในการจัดทำร่างรัฐธรรมนูญ
+            </a>
+            <a
+              href={`${url}/pdf/2054161.pdf`}
+              target="_blank"
+              rel="noreferrer"
+              className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              ประกาศคณะรักษาความสงบแห่งชาติ เรื่อง
+              แต่งตั้งคณะกรรมการร่างรัฐธรรมนูญ
+            </a>
+            <a
+              href="/"
+              target="_blank"
+              rel="noreferrer"
+              className="pt-8 underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              แบบประเมินความพึงพอใจการใช้งานเว็บไซต์
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}