Put a search bar on the homepage

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"} />

src/pages/index.tsx

 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" />}
             >
+                <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>
+                </div>
             </FallbackErrorBoundary>
         </ReloadBoundary>
-        </div>
     );
 }