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

Add user location marker to brewery map, Add beer sec. for brewery posts

Browse Source
This commit is contained in:
Aaron William Po
2023-05-01 23:09:50 -04:00
parent f3d471be4c
commit d20ab0fd1f
10 changed files with 363 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/breweries/[id].tsx
View File

@@ -11,7 +11,7 @@ import useMediaQuery from '@/hooks/useMediaQuery';
import { Tab } from '@headlessui/react';
import BreweryInfoHeader from '@/components/BreweryById/BreweryInfoHeader';
import BreweryPostMap from '@/components/BreweryById/BreweryPostMap';
import BreweryBeersSection from '@/components/BreweryById/BreweryBeerSection.tsx';
import BreweryBeersSection from '@/components/BreweryById/BreweryBeerSection';
import BreweryCommentsSection from '@/components/BreweryById/BreweryCommentsSection';
interface BreweryPageProps {
@@ -63,7 +63,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
</div>
<div className="w-[40%] space-y-3">
<BreweryPostMap latitude={latitude} longitude={longitude} />
<BreweryBeersSection />
<BreweryBeersSection breweryPost={breweryPost} />
</div>
</div>
) : (
@@ -83,7 +83,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
<BreweryCommentsSection breweryPost={breweryPost} />
</Tab.Panel>
<Tab.Panel>
<BreweryBeersSection />
<BreweryBeersSection breweryPost={breweryPost} />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>

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

@@ -13,6 +13,7 @@ import DBClient from '@/prisma/DBClient';
import LocationMarker from '@/components/ui/LocationMarker';
import Link from 'next/link';
import Head from 'next/head';
import useGeolocation from '@/hooks/useGeolocation';
type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
@@ -61,7 +62,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
setPopupInfo(brewery);
}}
>
<LocationMarker />
<LocationMarker size="md" color="blue" />
</Marker>
);
})}
@@ -69,6 +70,19 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
),
[breweries],
);
const { coords, error } = useGeolocation();
const userLocationPin = useMemo(
() =>
coords && !error ? (
<Marker latitude={coords.latitude} longitude={coords.longitude}>
<LocationMarker size="lg" color="red" />
</Marker>
) : null,
[coords, error],
);
return (
<>
<Head>
@@ -90,6 +104,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ breweries }) => {
<NavigationControl position="top-left" />
<ScaleControl />
{pins}
{userLocationPin}
{popupInfo && (
<Popup
anchor="bottom"