From 873bd00fceac2399d7056d60a965a5d388fd2826 Mon Sep 17 00:00:00 2001 From: maui Date: Tue, 19 Mar 2024 22:09:50 +0100 Subject: [PATCH] Display map when button clicked --- .../_components/main-map-or-placeholder.tsx | 93 +++++++++++++++++++ src/app/[locale]/(app)/explore/layout.tsx | 16 ++-- 2 files changed, 101 insertions(+), 8 deletions(-) create mode 100644 src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx diff --git a/src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx b/src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx new file mode 100644 index 00000000..720235cd --- /dev/null +++ b/src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx @@ -0,0 +1,93 @@ +'use client' + +import { Button } from '@nextui-org/react' +import { IconMap } from '@tabler/icons-react' +import { ClassValue } from 'clsx' +import { FC, useState } from 'react' +import { MainMap } from '~/components/map/main-map' +import { cn } from '~/helpers/cn' + +export const MainMapOrPlaceholder: FC<{ + className?: string + classNames?: { + controls?: string + expanded?: ClassValue + collapsed?: ClassValue + } +}> = ({ className, classNames }) => { + const [showingMap, setShowingMap] = useState(false) + + return showingMap ? ( + + ) : ( +
setShowingMap(true)} + > + + +
+ ) +} + +const MapPlaceholderImg: FC<{ + className?: string +}> = ({ className }) => ( + + + + + + + + + +) diff --git a/src/app/[locale]/(app)/explore/layout.tsx b/src/app/[locale]/(app)/explore/layout.tsx index 7b674ff7..5461a59d 100644 --- a/src/app/[locale]/(app)/explore/layout.tsx +++ b/src/app/[locale]/(app)/explore/layout.tsx @@ -1,10 +1,9 @@ import { unstable_setRequestLocale } from 'next-intl/server' import type { FC, PropsWithChildren } from 'react' -import { MainMap } from '~/components/map/main-map' import { MainMapProvider } from '~/components/providers/main-map-provider' -import { cn } from '~/helpers/cn' import { parseLocale, type LocaleRouteParams } from '~/i18n' import { ExploreTopbar } from './_components/explore-topbar' +import { MainMapOrPlaceholder } from './_components/main-map-or-placeholder' import { MapDrawer } from './_components/map-drawer' type ExploreLayoutProps = PropsWithChildren @@ -19,14 +18,15 @@ const ExploreLayout: FC = async ({ params, children }) => {
-