genai logo

src/app/head.jsx

@@ -1,9 +1,9 @@
 export default function Head() {
   return (
     <>
-      <title>Google Clone Next js 13</title>
+      <title>My Search UI</title>
       <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <meta name="description" content="Google clone created by Next js 13" />
+      <meta name="description" content="Search UI" />
       <link rel="icon" href="/favicon.svg" />
     </>
   )

src/app/page.jsx

@@ -1,5 +1,6 @@
 import HomeHeader from "@/components/HomeHeader";
 import HomeSearch from "@/components/HomeSearch";
+import { logo } from "@/util";
 import Image from "next/image";
 import "@/app/globals.css";
 
@@ -15,7 +16,7 @@ export default function Home() {
         <Image
           width="300"
           height="100"
-          src="https://upload.wikimedia.org/wikinews/en/archive/0/0c/20050620003808%21Google_logo_png.png"
+          src={`/logo${logo()}.png`}
         />
 
         <HomeSearch/>

src/app/search/web/page.jsx

@@ -4,7 +4,6 @@ import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown
 import { CodeBlock } from '../../../components/CodeBlock';
 import { useSearchParams } from 'next/navigation'
 
-
 export default function WebSearchPage() {
   const searchParams = useSearchParams()
 

src/components/HomeSearch.jsx

@@ -41,7 +41,7 @@ export default function HomeSearch() {
 
       <div className="flex flex-col space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:flex-row mt-8 ">
         <button onClick={handleSubmit} className="btn">
-          Google Search
+          Search
         </button>
         <button
           disabled={randomSearchLoading}

src/components/SearchHeader.jsx

@@ -1,12 +1,24 @@
+import Link from "next/link";
 import Image from "next/image";
 import SearchBox from "./SearchBox";
+import { logo } from "@/util";
 import SearchHeaderOptions from "./SearchHeaderOptions";
 
+
 export default function SearchHeader() {
   return (
     <header className="sticky top-0 bg-white">
       <div className="flex w-full p-6 items-center justify-between">
-        <SearchBox />
+        <Link href={"/"}>
+            <Image
+              width="120"
+              height="40"
+              src={`/logo${logo()}.png`}
+            />
+        </Link>
+        <div className="flex-1">
+          <SearchBox />
+        </div>
       </div>
       <SearchHeaderOptions />
     </header>

src/util.js

@@ -0,0 +1 @@
+export const logo = (array = [1, 2, 3]) => array[Math.floor(Math.random() * array.length)];