💄 update landing page

neuland-ingolstadt · Oct 28, 2024 · 9c61f4b · 9c61f4b
1 parent ea4ac8c
commit 9c61f4b
Show file tree

Hide file tree

Showing 5 changed files with 351 additions and 284 deletions.
diff --git a/components/tour/tourMap.tsx b/components/tour/tourMap.tsx
@@ -1,11 +1,17 @@
-import React, { useState, createRef, useMemo } from 'react'
+import React, {
+  useState,
+  createRef,
+  useMemo,
+  useCallback,
+  useEffect,
+} from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 
 import Map, { MapRef, Marker } from 'react-map-gl/maplibre'
 import { useMediaQuery } from 'usehooks-ts'
 import { ChevronsLeft, ImagePlay, MapPin, Menu } from 'lucide-react'
-import { TourData } from '@/pages/tour/[city]'
+import { City, TourData } from '@/pages/tour/[city]'
 import {
   Dialog,
   DialogContent,
@@ -33,6 +39,9 @@ import {
 } from '@/components/ui/drawer'
 import { AttributionControl } from '@/components/map/attributionControl'
 import MapStyleControl from '@/components/map/styleControl'
+import { useTheme } from 'next-themes'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useRouter } from 'next/router'
 
 interface CategoryProps {
   fill: string
@@ -78,7 +87,16 @@ interface TourMapProps {
 export type MapStyle = 'bright' | 'light' | 'dark'
 
 export default function TourMap({ center, data }: TourMapProps) {
-  const [mapStyle, setMapStyle] = useState<MapStyle>('bright')
+  const router = useRouter()
+
+  const city = useMemo(() => {
+    return router.query.city as string
+  }, [router.query.city])
+
+  const { resolvedTheme } = useTheme()
+  const [mapStyle, setMapStyle] = useState<MapStyle>(
+    resolvedTheme === 'dark' ? 'dark' : 'light'
+  )
   const [dialogOpen, showDialog] = useState(true)
   const [drawerOpen, setDrawer] = useState(false)
   const [popup, setPopup] = useState<TourData | undefined>(undefined)
@@ -163,6 +181,45 @@ export default function TourMap({ center, data }: TourMapProps) {
     )
   }, [PADDING, categorizedData, mapRef])
 
+  const selectCity = useCallback(
+    (city: City) => {
+      router.push(`/tour/${city}`)
+    },
+    [router]
+  )
+
+  useEffect(() => {
+    mapRef.current?.getMap().easeTo({
+      center: [center[1], center[0]],
+      zoom: 15,
+      animate: false,
+    })
+  }, [center, mapRef])
+
+  const tabs = useMemo(() => {
+    return (
+      <Tabs
+        defaultValue={city}
+        className="w-full"
+      >
+        <TabsList className="grid grid-cols-2 gap-2">
+          <TabsTrigger
+            value="ingolstadt"
+            onClick={() => selectCity('ingolstadt')}
+          >
+            Ingolstadt
+          </TabsTrigger>
+          <TabsTrigger
+            value="neuburg"
+            onClick={() => selectCity('neuburg')}
+          >
+            Neuburg
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    )
+  }, [city, selectCity])
+
   return (
     <>
       <Dialog
@@ -251,6 +308,8 @@ export default function TourMap({ center, data }: TourMapProps) {
               />
             </Link>
 
+            {tabs}
+
             <Link
               href="/"
               passHref
@@ -271,7 +330,6 @@ export default function TourMap({ center, data }: TourMapProps) {
         <div className="h-full flex-1">
           <Map
             ref={mapRef}
-            reuseMaps
             mapStyle={`https://tile.neuland.app/styles/${mapStyle}/style.json`}
             attributionControl={false}
             initialViewState={{
@@ -332,26 +390,32 @@ export default function TourMap({ center, data }: TourMapProps) {
               }
             )}
           >
-            <Link
-              href="/"
-              passHref
-            >
-              <Button
-                size="icon"
-                variant="secondary"
-                className="shadow"
-              >
-                <ChevronsLeft />
-              </Button>
-            </Link>
+            <div className="flex w-full flex-col gap-2">
+              <div className="flex gap-2">
+                <Link
+                  href="/"
+                  passHref
+                >
+                  <Button
+                    size="icon"
+                    variant="secondary"
+                    className="shadow"
+                  >
+                    <ChevronsLeft />
+                  </Button>
+                </Link>
 
-            <Button
-              className="w-full items-center gap-2 shadow-lg"
-              onClick={() => setDrawer(true)}
-            >
-              <Menu />
-              <span>Menu</span>
-            </Button>
+                <Button
+                  className="w-full items-center gap-2 bg-primary shadow-lg"
+                  onClick={() => setDrawer(true)}
+                >
+                  <Menu />
+                  <span>Menu</span>
+                </Button>
+              </div>
+
+              {tabs}
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/ui/footer.tsx b/components/ui/footer.tsx
@@ -1,9 +1,19 @@
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import Link from 'next/link'
 
-export default function Footer() {
+interface FooterProps {
+  className?: string
+}
+
+export default function Footer({ className }: FooterProps) {
   return (
-    <footer className="flex flex-col items-center border-t py-4 md:flex-row md:justify-between">
+    <footer
+      className={cn(
+        'flex flex-col items-center border-t py-4 md:flex-row md:justify-between',
+        className
+      )}
+    >
       <div>
         <p>
           Ein Projekt der{' '}

diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
@@ -11,72 +11,81 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
 import { Palette, Settings } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
 
-export default function NavBar() {
+interface NavBarProps {
+  overlay?: boolean
+}
+
+export default function NavBar({ overlay = false }: NavBarProps) {
   const { setTheme } = useTheme()
 
   return (
-    <div className="mb-3 border-b">
-      <div className="flex h-16 items-center">
-        <Link
-          href="/"
-          passHref
-        >
-          <Image
-            src="https://assets.neuland.app/StudVer_Logo_2020_CMYK.svg"
-            alt="Neuland e.V. Logo"
-            priority
-            width={120}
-            height={35}
-            className="flex-shrink-0 cursor-pointer"
-          />
-        </Link>
+    <>
+      <div className="fixed left-0 top-0 z-50 mb-16 w-screen border-b bg-background shadow-sm">
+        <div className="container flex h-16 items-center">
+          <Link
+            href="/"
+            passHref
+          >
+            <Image
+              src="https://assets.neuland.app/StudVer_Logo_2020_CMYK.svg"
+              alt="Neuland e.V. Logo"
+              priority
+              width={120}
+              height={35}
+              className="flex-shrink-0 cursor-pointer"
+            />
+          </Link>
 
-        <span className="flex-1" />
+          <span className="flex-1" />
 
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              className="relative h-8 w-8"
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="relative h-8 w-8"
+              >
+                <Settings className="h-6 w-6" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-56"
+              align="end"
+              forceMount
             >
-              <Settings className="h-6 w-6" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-56"
-            align="end"
-            forceMount
-          >
-            <DropdownMenuGroup>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <Palette className="mr-2 h-4 w-4" />
-                  <p>Design</p>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem onClick={() => setTheme('light')}>
-                      Hell
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setTheme('dark')}>
-                      Dunkel
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => setTheme('system')}>
-                      System
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
+              <DropdownMenuGroup>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <Palette className="mr-2 h-4 w-4" />
+                    <p>Design</p>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem onClick={() => setTheme('light')}>
+                        Hell
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setTheme('dark')}>
+                        Dunkel
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={() => setTheme('system')}>
+                        System
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
-    </div>
+
+      <span className={cn('block h-16', { hidden: overlay })} />
+    </>
   )
 }