From b1d2f9675a0723797783824ad3aa447c2bed49cc Mon Sep 17 00:00:00 2001
From: Dorian Koch <doriank@fsmpi.rwth-aachen.de>
Date: Sat, 14 Dec 2024 13:51:31 +0100
Subject: [PATCH] Put a search bar on the homepage

---
 src/components/DefaultLayout.tsx |  6 ++++--
 src/pages/index.tsx              | 34 ++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/DefaultLayout.tsx b/src/components/DefaultLayout.tsx
index 822d750..f398f01 100644
--- a/src/components/DefaultLayout.tsx
+++ b/src/components/DefaultLayout.tsx
@@ -282,7 +282,7 @@ function UserField({ isUnavailable }: { isUnavailable: boolean }) {
     );
 }
 
-function Search({ className }: { className?: string }) {
+export function Search({ className }: { className?: string }) {
     const router = useRouter();
     const [query, setQuery] = useState("");
     const { language } = useLanguage();
@@ -368,6 +368,8 @@ function NavBar({ status }: { status?: GetStatusResponse }) {
         }
     };
 
+    const isHome = useRouter().pathname === "/";
+
     return (
         <nav className={"hidden-print navbar navbar-expand-lg mb-3 bg-body-tertiary"}>
             <div className="container-fluid">
@@ -505,7 +507,7 @@ function NavBar({ status }: { status?: GetStatusResponse }) {
 
                             <div className="flex-fill d-none d-lg-block" />
 
-                            <Search className="me-1 flex-sm-fill w-sm-auto" />
+                            {!isHome && <Search className="me-1 flex-sm-fill w-sm-auto" />}
 
                             <div className="d-flex align-items-center">
                                 <UserField isUnavailable={status?.status === "unavailable"} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7681c3f..045aa9f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import { useBackendContext } from "@/components/BackendProvider";
 import { useEditMode } from "@/components/EditModeProvider";
 import { FallbackErrorBoundary } from "@/components/FallbackErrorBoundary";
+import { basePath } from "@/../basepath";
 import {
     OMCreate,
     OMDelete,
@@ -21,6 +22,7 @@ import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { VideoCard } from "@/components/VideoCard";
 import { LectureLiveLabel } from "@/components/LiveLabel";
+import { Search } from "@/components/DefaultLayout";
 
 function FeatureCard({ data, all_featured }: { data: featured; all_featured: featured[] }) {
     const { editMode } = useEditMode();
@@ -290,11 +292,27 @@ export default function Home() {
     if (homepageData === undefined) return <></>;
 
     return (
-        <div className="row">
-            <ReloadBoundary reloadFunc={reloadData}>
-                <FallbackErrorBoundary
-                    fallback={(e: any) => <ErrorPage error={e} objectName="Seite" />}
-                >
+        <ReloadBoundary reloadFunc={reloadData}>
+            <FallbackErrorBoundary
+                fallback={(e: any) => <ErrorPage error={e} objectName="Seite" />}
+            >
+                <div className="row justify-content-center w-100 mt-3 mb-4 mx-0">
+                    <div className="col-md-5 px-0 text-center">
+                        <div className="d-flex justify-content-center align-items-center">
+                            <img
+                                alt="VideoAG"
+                                src={`${basePath}/static/logo.png`}
+                                width={88}
+                                height={88}
+                            />
+                            <h1 className="ms-3">VideoAG</h1>
+                        </div>
+
+                        <Search className="mt-3" />
+                    </div>
+                </div>
+                <hr />
+                <div className="row">
                     {editMode && <ModButtons />}
                     <Suspense fallback={<div className="spinner-border" />}>
                         <div className="col-md-6">
@@ -321,8 +339,8 @@ export default function Home() {
                             </div>
                         </div>
                     </Suspense>
-                </FallbackErrorBoundary>
-            </ReloadBoundary>
-        </div>
+                </div>
+            </FallbackErrorBoundary>
+        </ReloadBoundary>
     );
 }
-- 
GitLab