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