Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display map when button clicked #253

Closed
wants to merge 3 commits into from
Closed

Display map when button clicked #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
873bd00
Display map when button clicked
mauriciabad Mar 19, 2024
5d26cac
Merge branch 'main' into map-placeholder
mauriciabad Mar 20, 2024
177db17
Merge branch 'main' into map-placeholder
mauriciabad Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<boolean>(false)

return showingMap ? (
<MainMap
className={cn(className, classNames?.expanded)}
classNames={classNames}
/>
) : (
<div
className={cn(
'relative cursor-pointer',
'flex items-center justify-center',
'bg-gradient-to-r from-[#add19f] from-50% to-[#aad3df] to-50%',
className,
classNames?.collapsed
)}
onClick={() => setShowingMap(true)}
>
<MapPlaceholderImg className="absolute inset-0 z-0 mx-auto h-full" />
<Button
onPress={() => setShowingMap(true)}
variant="faded"
size="lg"
startContent={<IconMap />}
>
Show map
</Button>
</div>
)
}

const MapPlaceholderImg: FC<{
className?: string
}> = ({ className }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="528"
height="768"
fill="none"
viewBox="0 0 528 768"
className={className}
>
<path
fill="#ADD19F"
d="M191.021 0c0 5.848 17.05 23.39 16.563 30.7-.487 7.31-7.795 2.437-8.769 10.721-.974 8.285-8.768 33.137 4.384 37.036 13.153 3.898 19.486.487 19.973-8.772.487-9.259 3.897-6.822 5.359-6.822 1.461 0 9.255 6.822 14.614 6.822s9.743-4.873 13.64-3.41c3.897 1.461 2.923 5.36 5.846 5.36 2.922 0 6.333-1.95 9.743-1.95s2.922 2.924 4.384 2.924c1.461 0 6.333-6.335 14.614-6.335s24.357-3.898 30.203-4.386c5.845-.487 17.05 21.442 23.382 25.828 6.333 4.386 8.769-3.899 10.23-5.36 1.462-1.463 11.692 7.796 8.282 12.67-3.41 4.873 15.588 26.314 19.485 28.263 3.897 1.95 19.486 9.259 24.845 8.285 5.358-.975 3.41-8.285 8.281-8.285s3.897 11.208 7.307 12.183c3.41.975 5.846-2.436 8.769 0 2.922 2.437-1.462 13.157-2.436 14.619-.974 1.462-7.307 3.412-7.794 5.361-.488 1.949 1.948 10.721 4.384 11.208 2.436.487 11.691 2.924 12.178 14.619.488 11.696.975 10.234-.974 10.721-1.948.487-5.358-2.437-7.794-2.437s-17.05 5.848-17.05 9.259c0 3.411 2.436 6.823 0 11.208-2.436 4.386-23.87.975-26.793 4.386-2.923 3.411 23.87 20.955 25.331 23.391 1.462 2.437-.487 6.335 1.462 7.31 1.948.974 4.871-7.31 9.256-4.873 4.384 2.436 1.461 4.385 3.41 6.335 1.948 1.949 2.435-.488 4.384 1.949 1.948 2.436-1.949 12.67-4.384 15.594-2.436 2.924-14.127 4.386-9.743 9.746s2.436 1.949 9.743 3.898c7.307 1.95 13.152 12.671 17.537 12.671 4.384 0 3.41-9.747 3.41-16.569 0-6.822 3.41-9.259 4.384-13.157.974-3.899 4.384-13.158 7.307-12.183 2.923.975 0 8.284 0 10.233 0 1.95 4.871 4.386 3.897 14.132-.974 9.747-2.923 11.696-2.923 14.62 0 2.924 2.923 4.873 2.923 10.72 0 5.848-3.41 8.285-5.846 8.285-2.435 0-4.384-6.335-8.768-5.361-4.384.975-9.256 14.132-9.743 17.056-.487 2.924 1.949 4.386.974 6.823-.974 2.436-24.844 21.928-25.331 31.187-.487 9.259 22.896 18.518 22.896 23.879 0 5.36-8.282 14.132-7.307 21.441.974 7.31 30.202 14.132 29.715 25.34-.487 11.208-33.125 28.752-39.458 29.239-6.333.487-12.666-1.462-16.563-1.462-3.897 0-14.614 8.771-14.127 11.695.487 2.924 7.794 5.848 7.307 8.285-.487 2.436-11.204-.975-12.666 2.436-1.461 3.411-4.871 19.005-7.794 21.929-2.923 2.924-3.897.975-8.281 1.949-4.385.975-88.66 46.295-89.634 57.016-.974 10.72 2.923 11.695 3.897 12.182.974.488 6.82 1.462 6.82 5.848s-8.281 16.081-8.281 18.03c0 1.95-3.41 9.747-4.872 15.107-1.461 5.36-1.461 7.31-7.307 7.31s-11.691-2.437-12.666 0c-.974 2.436 3.41 6.335 3.41 8.771 0 2.437-10.717 1.95-11.204 5.361-.487 3.411-9.255 8.771-7.307 12.67 1.949 3.898 17.537 1.949 19.486 8.771 1.948 6.823-4.385 23.878 1.948 25.34 6.333 1.462 16.563-4.385 16.563-6.822 0-2.436-.974-7.797 3.897-12.183 4.872-4.385 9.743-9.746 13.64-6.335 3.118 2.729-2.923 17.543-1.948 18.518.974.975 12.957-10.623 14.127-8.284 1.461 2.924-2.923 13.157-4.872 14.132-1.948.974-19.485 10.233-18.511 11.695.974 1.462 7.307-2.924 9.256 0 1.948 2.924-9.256 20.467-9.256 21.442 0 .974 17.537-12.183 20.46-9.259 2.923 2.924-20.947 24.365-23.87 25.34-2.923.975-23.87 4.386-24.357 10.721-.487 6.335-5.359 10.233-4.872 13.645.488 3.411 3.41 5.847 4.872 5.847 1.461 0 16.563.488 21.434 1.949 4.871 1.462 7.307 8.285 7.307 10.234H0V0h191.021Z"
/>
<path
fill="#AAD3DF"
d="M191 0c0 5.848 17.057 23.39 16.569 30.7-.487 7.31-7.797 2.437-8.772 10.721-.974 8.285-8.772 33.137 4.386 37.036 13.158 3.898 19.494.487 19.981-8.772.487-9.259 3.899-6.822 5.361-6.822 1.462 0 9.259 6.822 14.62 6.822 5.36 0 9.746-4.873 13.645-3.41 3.899 1.461 2.924 5.36 5.848 5.36s6.335-1.95 9.746-1.95c3.412 0 2.924 2.924 4.386 2.924 1.462 0 6.336-6.335 14.62-6.335 8.285 0 24.367-3.898 30.215-4.386 5.848-.487 17.057 21.442 23.392 25.828 6.335 4.386 8.772-3.899 10.234-5.36 1.462-1.463 11.696 7.796 8.285 12.67-3.412 4.873 15.594 26.314 19.493 28.263 3.899 1.95 19.493 9.259 24.854 8.285 5.361-.975 3.411-8.285 8.285-8.285 4.873 0 3.898 11.208 7.31 12.183 3.411.975 5.848-2.436 8.772 0 2.924 2.437-1.462 13.157-2.437 14.619-.975 1.462-7.31 3.412-7.797 5.361-.488 1.949 1.949 10.721 4.386 11.208 2.436.487 11.696 2.924 12.183 14.619.487 11.696.974 10.234-.975 10.721-1.949.487-5.36-2.437-7.797-2.437-2.437 0-17.057 5.848-17.057 9.259 0 3.411 2.437 6.823 0 11.208-2.436 4.386-23.879.975-26.803 4.386-2.924 3.411 23.879 20.955 25.341 23.391 1.462 2.437-.487 6.335 1.462 7.31 1.95.974 4.874-7.31 9.26-4.873 4.386 2.436 1.462 4.385 3.411 6.335 1.949 1.949 2.437-.488 4.386 1.949 1.949 2.436-1.949 12.67-4.386 15.594-2.437 2.924-14.133 4.386-9.747 9.746 4.386 5.36 2.437 1.949 9.747 3.898 7.31 1.95 13.158 12.671 17.544 12.671 4.386 0 3.411-9.747 3.411-16.569 0-6.822 3.411-9.259 4.386-13.157.975-3.899 4.386-13.158 7.31-12.183 2.924.975 0 8.284 0 10.233 0 1.95 4.873 4.386 3.899 14.132-.975 9.747-2.924 11.696-2.924 14.62 0 2.924 2.924 4.873 2.924 10.72 0 5.848-3.412 8.285-5.848 8.285-2.437 0-4.386-6.335-8.772-5.361-4.386.975-9.26 14.132-9.747 17.056-.487 2.924 1.949 4.386.975 6.823-.975 2.436-24.854 21.928-25.341 31.187-.488 9.259 22.904 18.518 22.904 23.879 0 5.36-8.284 14.132-7.31 21.441.975 7.31 30.215 14.132 29.727 25.34-.487 11.208-33.138 28.752-39.473 29.239-6.336.487-12.671-1.462-16.57-1.462-3.898 0-14.62 8.771-14.132 11.695.487 2.924 7.797 5.848 7.31 8.285-.488 2.436-11.209-.975-12.671 2.436-1.462 3.411-4.873 19.005-7.797 21.929-2.924 2.924-3.899.975-8.285 1.949-4.386.975-88.695 46.295-89.669 57.016-.975 10.72 2.924 11.695 3.898 12.182.975.488 6.823 1.462 6.823 5.848s-8.285 16.081-8.285 18.03c0 1.95-3.411 9.747-4.873 15.107-1.462 5.36-1.462 7.31-7.31 7.31s-11.696-2.437-12.67 0c-.975 2.436 3.411 6.335 3.411 8.771 0 2.437-10.721 1.95-11.209 5.361-.487 3.411-9.259 8.771-7.31 12.67 1.95 3.898 17.544 1.949 19.494 8.771 1.949 6.823-4.386 23.878 1.949 25.34 6.335 1.462 16.569-4.385 16.569-6.822 0-2.436-.975-7.797 3.899-12.183 4.873-4.385 9.746-9.746 13.645-6.335 3.119 2.729-2.924 17.543-1.949 18.518.974.975 12.963-10.623 14.132-8.284 1.462 2.924-2.924 13.157-4.873 14.132-1.949.974-19.493 10.233-18.519 11.695.975 1.462 7.31-2.924 9.26 0 1.949 2.924-9.26 20.467-9.26 21.442 0 .974 17.544-12.183 20.468-9.259 2.924 2.924-20.955 24.365-23.879 25.34-2.924.975-23.879 4.386-24.366 10.721-.488 6.335-5.361 10.233-4.874 13.645.488 3.411 3.412 5.847 4.874 5.847 1.462 0 16.569.488 21.442 1.949 4.873 1.462 7.31 8.285 7.31 10.234H528V0H191Z"
/>
<path
stroke="#97789D"
stroke-width="2"
d="M191 0c0 5.848 17.051 23.39 16.564 30.7-.487 7.31-7.795 2.437-8.769 10.721-.975 8.285-8.769 33.137 4.384 37.036 13.154 3.898 19.488.487 19.975-8.772.487-9.259 3.897-6.822 5.359-6.822 1.461 0 9.256 6.822 14.615 6.822s9.744-4.873 13.641-3.41c3.898 1.461 2.923 5.36 5.846 5.36s6.334-1.95 9.744-1.95 2.923 2.924 4.384 2.924c1.462 0 6.334-6.335 14.616-6.335s24.359-3.898 30.205-4.386c5.846-.487 17.051 21.442 23.384 25.828 6.334 4.386 8.77-3.899 10.231-5.36 1.462-1.463 11.692 7.796 8.282 12.67-3.41 4.873 15.59 26.314 19.487 28.263 3.898 1.95 19.487 9.259 24.846 8.285 5.359-.975 3.411-8.285 8.282-8.285 4.872 0 3.898 11.208 7.308 12.183 3.41.975 5.846-2.436 8.769 0 2.923 2.437-1.461 13.157-2.436 14.619-.974 1.462-7.307 3.412-7.794 5.361-.488 1.949 1.948 10.721 4.384 11.208 2.436.487 11.692 2.924 12.18 14.619.487 11.696.974 10.234-.975 10.721-1.948.487-5.359-2.437-7.795-2.437-2.435 0-17.051 5.848-17.051 9.259 0 3.411 2.436 6.823 0 11.208-2.436 4.386-23.872.975-26.795 4.386-2.923 3.411 23.872 20.955 25.334 23.391 1.461 2.437-.488 6.335 1.461 7.31 1.949.974 4.872-7.31 9.257-4.873 4.384 2.436 1.461 4.385 3.41 6.335 1.949 1.949 2.436-.488 4.384 1.949 1.949 2.436-1.948 12.67-4.384 15.594-2.436 2.924-14.128 4.386-9.744 9.746 4.385 5.36 2.436 1.949 9.744 3.898 7.307 1.95 13.154 12.671 17.538 12.671 4.385 0 3.41-9.747 3.41-16.569 0-6.822 3.411-9.259 4.385-13.157.974-3.899 4.385-13.158 7.308-12.183 2.923.975 0 8.284 0 10.233 0 1.95 4.872 4.386 3.897 14.132-.974 9.747-2.923 11.696-2.923 14.62 0 2.924 2.923 4.873 2.923 10.72 0 5.848-3.41 8.285-5.846 8.285s-4.385-6.335-8.769-5.361c-4.385.975-9.257 14.132-9.744 17.056-.487 2.924 1.949 4.386.975 6.823-.975 2.436-24.846 21.928-25.334 31.187-.487 9.259 22.898 18.518 22.898 23.879 0 5.36-8.282 14.131-7.308 21.441.974 7.31 30.205 14.132 29.718 25.34-.487 11.208-33.128 28.752-39.462 29.239-6.333.487-12.666-1.462-16.564-1.462-3.897 0-14.615 8.771-14.128 11.695.487 2.924 7.795 5.848 7.308 8.285-.487 2.436-11.205-.975-12.667 2.436-1.461 3.411-4.872 19.005-7.795 21.929-2.923 2.924-3.897.975-8.282 1.949-4.384.975-88.666 46.295-89.64 57.016-.975 10.72 2.923 11.695 3.897 12.182.974.488 6.82 1.462 6.82 5.848s-8.282 16.081-8.282 18.03c0 1.95-3.41 9.747-4.871 15.107-1.462 5.36-1.462 7.31-7.308 7.31s-11.692-2.437-12.667 0c-.974 2.436 3.411 6.335 3.411 8.771 0 2.437-10.718 1.949-11.205 5.361-.488 3.411-9.257 8.771-7.308 12.67 1.949 3.898 17.538 1.949 19.487 8.771 1.949 6.823-4.385 23.878 1.949 25.34 6.333 1.462 16.564-4.385 16.564-6.822 0-2.436-.975-7.797 3.897-12.183 4.872-4.385 9.744-9.746 13.641-6.335 3.118 2.729-2.923 17.543-1.949 18.518.975.975 12.959-10.623 14.129-8.284 1.461 2.924-2.923 13.157-4.872 14.132-1.949.974-19.487 10.233-18.513 11.695.974 1.462 7.308-2.924 9.256 0 1.949 2.924-9.256 20.467-9.256 21.442 0 .974 17.538-12.183 20.462-9.259 2.923 2.924-20.949 24.365-23.872 25.34-2.923.975-23.872 4.386-24.359 10.721-.487 6.335-5.359 10.233-4.872 13.645.487 3.411 3.41 5.847 4.872 5.847 1.461 0 16.564.488 21.436 1.949 4.872 1.462 7.307 8.285 7.307 10.234"
/>
<path
fill="#ADD19F"
d="M263.5 306c-30.1 0-54.5 24.4-54.5 54.5h109c0-30.1-24.4-54.5-54.5-54.5Z"
/>
<path
stroke="#8FAF82"
stroke-width="4"
d="M318 360.5c0-30.1-24.4-54.5-54.5-54.5S209 330.4 209 360.5"
/>
<path
fill="#EAD6B3"
stroke="#706654"
d="M229 290h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v26l-42 5-42-5v-26h4v-4h4v-4Z"
/>
<path
stroke="#8FAF82"
stroke-width="4"
d="M306 323.887c-9.989 2.508-25.316 4.113-42.5 4.113-17.768 0-33.551-1.716-43.5-4.372"
/>
</svg>
)
16 changes: 8 additions & 8 deletions src/app/[locale]/(app)/explore/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<LocaleRouteParams>
Expand All @@ -19,14 +18,15 @@ const ExploreLayout: FC<ExploreLayoutProps> = async ({ params, children }) => {

<main className="relative flex grow flex-col">
<MainMapProvider>
<MainMap
className={cn(
'min-h-[calc(100dvh_-_65px_-_140px_-_57px)]',
'sticky top-16 grow',
'-mb-2 box-content pb-2'
)}
<MainMapOrPlaceholder
className="-mb-2 box-content pb-2"
classNames={{
controls: 'bottom-6',
expanded: [
'min-h-[calc(100dvh_-_65px_-_140px_-_57px)]',
'sticky top-16 grow',
],
collapsed: 'h-48',
}}
/>

Expand Down
Loading