search page init

Author: YousefMohsen

components/search/Input.tsx

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+
+
+
+export default function Input({
+}) {
+const [value,setValue] = useState('')
+  return (
+    <input
+    style={{padding:'10px', width:'400px'}}
+    id="help-suggester-input"
+    type="text"
+    value={value}
+    onChange={(e)=>{
+        setValue( e.target.value)
+        console.log(' e.target.value', e.target.value)
+
+    }}
+    placeholder="Søg"
+    aria-label={'Søg'}
+  ></input>
+  );
+}
+

pages/find.tsx

@@ -0,0 +1,43 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+import { useQuery, gql, DocumentNode } from "@apollo/client";
+import Input from "../components/search/Input";
+import Link from "next/link";
+
+const Find: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <h1>Det nye-nye-bibliotek.dk - Search</h1>
+      <Link href="/">
+          <h3
+            style={{
+              color: "white",
+              border: "2px solid darkcyan",
+              padding: "5px",
+              maxWidth: "150px",
+              cursor: "pointer",
+              textAlign:'center'
+
+            }}
+          >
+       ⬅️ Go back
+          </h3>
+        </Link>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          paddingTop: "40px",
+          paddingBottom: "30px",
+          borderBottom: "1px solid white",
+        }}
+      >
+        <Input />
+      </div>
+    </div>
+  );
+};
+
+export default Find;

pages/index.tsx

@@ -87,21 +87,29 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>Det nye-nye-bibliotek.dk</h1>
-        <p className={styles.description}>
-          <Link href="/find">
-            <h3
-              style={{
-                color: "black",
-                backgroundColor: "whitesmoke",
-                padding: "10px",
-              }}
-            >
-              Go to search
-            </h3>
-          </Link>
-        </p>
-
-        <img src={heros.image.url} />
+        <Link href="/find">
+          <h3
+            style={{
+              color: "white",
+              backgroundColor: "darkcyan",
+              padding: "20px",
+              maxWidth: "200px",
+              cursor: "pointer",
+              position: "absolute",
+              marginLeft: "auto",
+              marginRight: "auto",
+              left: 0,
+              right: 0,
+              textAlign: "center",
+            }}
+          >
+           Søg
+          </h3>
+        </Link>
+        <img
+          src={heros.image.url}
+          style={{ width: "100vw", height: "500px" }}
+        />
       </main>
 
       <footer className={styles.footer}>

styles/Home.module.css

@@ -42,7 +42,8 @@
 .title {
   margin: 0;
   line-height: 1.15;
-  font-size: 4rem;
+  font-size: 3.5rem;
+  margin-bottom: 30px;
 }
 
 .title,