AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update: Add html head to brewery map page

Browse Source
This commit is contained in:
Aaron William Po
2023-04-30 23:44:28 -04:00
parent 1a806e7aff
commit f3d471be4c
2 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/breweries/index.tsx
View File

@@ -7,7 +7,7 @@ import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQuer
import { NextPage } from 'next'; import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import { useContext, MutableRefObject, useRef } from 'react'; import { useContext, MutableRefObject, useRef } from 'react';
import { Link } from 'react-daisyui'; import Link from 'next/link';
import { FaPlus, FaArrowUp } from 'react-icons/fa'; import { FaPlus, FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
import { z } from 'zod'; import { z } from 'zod';

86
src/pages/breweries/map.tsx
View File

@@ -12,6 +12,7 @@ import DBClient from '@/prisma/DBClient';
import LocationMarker from '@/components/ui/LocationMarker'; import LocationMarker from '@/components/ui/LocationMarker';
import Link from 'next/link'; import Link from 'next/link';
import Head from 'next/head';
type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>; type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
@@ -69,44 +70,53 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
[breweries], [breweries],
); );
return ( return (
<div className="h-full"> <>
<Map <Head>
initialViewState={{ zoom: 2 }} <title>Brewery Map | The Biergarten App</title>
style={{ width: '100%', height: '100%' }} <meta
mapStyle={mapStyles[theme]} name="description"
mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN} content="Find breweries near you and around the world."
scrollZoom />
> </Head>
<FullscreenControl position="top-left" /> <div className="h-full">
<NavigationControl position="top-left" /> <Map
<ScaleControl /> initialViewState={{ zoom: 2 }}
{pins} style={{ width: '100%', height: '100%' }}
{popupInfo && ( mapStyle={mapStyles[theme]}
<Popup mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
anchor="bottom" scrollZoom
longitude={popupInfo.location.coordinates[0]} >
latitude={popupInfo.location.coordinates[1]} <FullscreenControl position="top-left" />
onClose={() => setPopupInfo(null)} <NavigationControl position="top-left" />
> <ScaleControl />
<div className="flex flex-col text-black "> {pins}
<Link {popupInfo && (
className="link-hover link text-base font-bold" <Popup
href={`/breweries/${popupInfo.id}`} anchor="bottom"
> longitude={popupInfo.location.coordinates[0]}
{popupInfo.name} latitude={popupInfo.location.coordinates[1]}
</Link> onClose={() => setPopupInfo(null)}
<p className="text-base"> >
{popupInfo.location.city} <div className="flex flex-col text-black ">
{popupInfo.location.stateOrProvince <Link
? `, ${popupInfo.location.stateOrProvince}` className="link-hover link text-base font-bold"
: ''} href={`/breweries/${popupInfo.id}`}
{popupInfo.location.country ? `, ${popupInfo.location.country}` : ''} >
</p> {popupInfo.name}
</div> </Link>
</Popup> <p className="text-base">
)} {popupInfo.location.city}
</Map> {popupInfo.location.stateOrProvince
</div> ? `, ${popupInfo.location.stateOrProvince}`
: ''}
{popupInfo.location.country ? `, ${popupInfo.location.country}` : ''}
</p>
</div>
</Popup>
)}
</Map>
</div>
</>
); );
}; };